@vonage/vivid 3.0.0-next.7 → 3.0.0-test.0

package/src/lib/enums.ts

@@ -1,55 +0,0 @@
-/* eslint-disable no-shadow */
-export enum Connotation {
-	Primary = 'primary',
-	CTA = 'cta',
-	Success = 'success',
-	Alert = 'alert',
-	Warning = 'warning',
-	Info = 'info',
-	Announcement = 'announcement',
-}
-
-export enum ConnotationDecorative {
-	Pacific = 'pacific',
-}
-
-/* eslint-disable no-shadow */
-export enum Shape {
-	Rounded = 'rounded',
-	Pill = 'pill',
-	Circled = 'circled',
-	Sharp = 'sharp'
-}
-
-/* eslint-disable no-shadow */
-export enum Appearance {
-	Text = 'text',
-	Filled = 'filled',
-	Outlined = 'outlined',
-	Subtle = 'subtle',
-	Ghost = 'ghost',
-}
-
-export enum Size {
-	BaseSmall = 'base-small',
-	Base = 'base',
-	BaseLarge = 'base-large',
-}
-
-export enum Position {
-	Top = 'TOP',
-	Bottom = 'BOTTOM',
-	Start = 'START',
-	Center = 'CENTER',
-	End = 'END',
-}
-
-export enum Role {
-	Status = 'status',
-	Alert = 'alert',
-}
-
-export enum AriaLive {
-	Polite = 'polite',
-	Assertive = 'assertive',
-}

package/src/lib/focus/README.md

@@ -1 +0,0 @@
-# focus

package/src/lib/focus/focus.scss

@@ -1,17 +0,0 @@
-@use '../../../../../node_modules/@vonage/vivid-tokens/dist/sass/themes/consts' as theme-consts;
-@use 'partials/variables' as variables;
-
-
-:host {
-	display: contents;
-	border-radius: inherit;
-}
-
-.control {
-	position: absolute;
-	box-sizing: border-box;
-	border-radius: inherit;
-	box-shadow: inset 0 0 0 2px var(#{variables.$focus-stroke-color}, var(#{theme-consts.$vvd-color-on-canvas})),
-		inset 0 0 0 3px var(#{variables.$focus-stroke-gap-color}, currentColor);
-	inset: 0;
-}

package/src/lib/focus/focus.template.ts

@@ -1,16 +0,0 @@
-import { html } from '@microsoft/fast-element';
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-import type { Focus } from './focus';
-
-/**
- * The template for the {@link @microsoft/fast-foundation#Focus} component.
- *
- * @param context
- * @public
- */
-export const focusTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<Focus> = () => html`
-        <span class="control"></span>`;

package/src/lib/focus/focus.ts

@@ -1,10 +0,0 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
-
-/**
- * Base class for badge
- *
- * @public
- */
-export class Focus extends FoundationElement {
-	
-}

package/src/lib/focus/index.ts

@@ -1,21 +0,0 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-import { Focus } from './focus';
-import styles from './focus.scss';
-import { focusTemplate as template } from './focus.template';
-
-
-/**
- * Represents a focus custom element.
- * focus is a label that holds small amounts of information.
- * A focus can be used to display unread notifications, or to label a block of text.
- * Focuss don’t work for navigation because they can't include a hyperlink.
- */
-
-export const VIVIDFocus = Focus.compose<FoundationElementDefinition>({
-	baseName: 'focus',
-	template: template as any,
-	styles,
-});
-
-designSystem.register(VIVIDFocus());

package/src/lib/focus/partials/variables.scss

@@ -1,2 +0,0 @@
-$focus-stroke-color: --focus-stroke-color;
-$focus-stroke-gap-color: --focus-stroke-gap-color;

package/src/lib/icon/README.md

@@ -1,70 +0,0 @@
-# icon
-
-Find the icon you want to use on the [vivid icons search platform](https://icons.vivid.vonage.com).
-
-```js
-<script type='module'>
-    import '@vonage/vivid/icon';
-</script>
-```
-
-```html preview
-<p>I <vwc-icon type='heart-line' connotation='alert'></vwc-icon> VIVID!</p>
-```
-
-## Type
-
-- Type: `String`
-- Default: `''`
-
-Add a `type` attribute to add type to the icon.
-
-```html preview
-<vwc-icon type='profile-line'></vwc-icon>
-```
-
-## SVG
-
-While `type` fetches an icon from the Vivid predefined set of icons, `svg` property can be used to set a customized valid SVG string programmatically. 
-
-```html preview
-<vwc-icon id='icon'></vwc-icon>
-
-<script>
-  icon.svg = `
-    <svg viewBox="0 0 24 24">
-      <path fill="currentColor"
-        d="M6.11922 10.1706C5.8213 10.0548 5.49473 10.064 5.21134 10.1962 4.92796 10.3283 4.71098 10.5726 4.60814 10.8752 4.50529 11.1778 4.52501 11.514 4.66295 11.8098L7.61024 18.1303C8.43788 19.9052 9.90708 21.2924 11.6946 21.9868 13.4821 22.6812 15.4416 22.6259 17.1419 21.833L18.5366 21.1827C19.4417 20.7603 20.2431 20.1426 20.8882 19.3702 21.5333 18.5979 22.0073 17.6885 22.2792 16.7017L23.6271 11.8184C23.7189 11.5145 23.7087 11.1844 23.5983 10.8802 23.4878 10.5759 23.2832 10.3147 23.0168 10.1377 22.7339 9.96294 22.4024 9.89734 22.0836 9.95301 21.7647 10.0087 21.48 10.1818 21.2822 10.4405L19.4217 12.8724C19.3395 12.9796 19.2313 13.0626 19.1074 13.1135 18.9835 13.1643 18.848 13.1813 18.7137 13.1629 18.5793 13.1444 18.4507 13.0911 18.34 13.0081 18.2292 12.925 18.1401 12.8149 18.0809 12.6882L14.6545 5.34015C14.5165 5.04433 14.2717 4.81313 13.9737 4.69739 13.6758 4.58166 13.3492 4.59088 13.0658 4.72302 12.7825 4.85517 12.5655 5.09941 12.4626 5.40202 12.3598 5.70464 12.3795 6.04083 12.5175 6.33665L15.118 11.9135 14.4057 12.2457 11.4584 5.92523C11.3204 5.62941 11.0756 5.39821 10.7777 5.28247 10.4797 5.16674 10.1532 5.17596 9.86978 5.3081 9.5864 5.44024 9.36942 5.68449 9.26658 5.9871 9.16373 6.28972 9.18345 6.62591 9.32139 6.92173L12.2687 13.2422 11.5563 13.5744 8.9558 7.99748C8.81786 7.70166 8.57299 7.47045 8.27507 7.35472 7.97715 7.23899 7.65058 7.2482 7.36719 7.38035 7.08381 7.51249 6.86683 7.75674 6.76399 8.05935 6.66114 8.36196 6.68086 8.69816 6.8188 8.99397L9.41935 14.5709 8.70701 14.903 6.79995 10.8133C6.66201 10.5175 6.41714 10.2863 6.11922 10.1706zM17.3109 2.18607C17.4526 1.79684 17.883 1.59615 18.2722 1.73782 20.6132 2.58987 21.8202 5.17835 20.9682 7.51935 20.8265 7.90858 20.3961 8.10927 20.0069 7.9676 19.6177 7.82593 19.417 7.39555 19.5586 7.00632 20.1273 5.44379 19.3217 3.71607 17.7592 3.14736 17.3699 3.00569 17.1692 2.57531 17.3109 2.18607zM4.51646 19.5137C4.37479 19.9029 3.9444 20.1036 3.55517 19.9619 1.21417 19.1099.00714505 16.5214.859199 14.1804 1.00087 13.7912 1.43125 13.5905 1.82048 13.7322 2.20972 13.8738 2.41041 14.3042 2.26874 14.6934 1.70002 16.256 2.50567 17.9837 4.0682 18.5524 4.45743 18.6941 4.65812 19.1245 4.51646 19.5137zM17.0317 3.59159C16.6425 3.44992 16.2121 3.65061 16.0704 4.03984 15.9287 4.42908 16.1294 4.85946 16.5187 5.00113 17.2333 5.26124 17.6018 6.05143 17.3417 6.76607 17.2 7.15531 17.4007 7.58569 17.7899 7.72736 18.1792 7.86903 18.6095 7.66834 18.7512 7.2791 19.2947 5.78599 18.5248 4.13504 17.0317 3.59159zM5.75684 17.6599C5.61517 18.0492 5.18479 18.2499 4.79556 18.1082 3.30245 17.5647 2.5326 15.9138 3.07604 14.4207 3.21771 14.0315 3.6481 13.8308 4.03733 13.9724 4.42656 14.1141 4.62725 14.5445 4.48558 14.9337 4.22547 15.6484 4.59395 16.4386 5.30859 16.6987 5.69782 16.8403 5.89851 17.2707 5.75684 17.6599z">
-      </path>
-    </svg>
-`;
-</script>
-```
-
-## Connotation
-
-Set the `connotation` attribute to change the icon's connotation.
-It accepts a subset of predefined values.
-
-- Type: `'primary'` | `'announcement'` | `'cta'` | `'success'` | `'alert'` | `'info'`
-- Default: `'primary'`
-
-```html preview
-<vwc-icon type='heart-solid' connotation='primary'></vwc-icon>
-<vwc-icon type='heart-solid' connotation='announcement'></vwc-icon>
-<vwc-icon type='heart-solid' connotation='cta'></vwc-icon>
-<vwc-icon type='heart-solid' connotation='success'></vwc-icon>
-<vwc-icon type='heart-solid' connotation='alert'></vwc-icon>
-<vwc-icon type='heart-solid' connotation='info'></vwc-icon>
-```
-
-Use the `size` attribute to change the icon's size.
-
-- Type: `'base-small'` | `'base'` | `'base-large'`
-- Default: `'base'`
-
-```html preview
-<vwc-icon type='close-line' size='base-small'></vwc-icon>
-<vwc-icon type='close-line' size='base'></vwc-icon>
-<vwc-icon type='close-line' size='base-large'></vwc-icon>
-```

package/src/lib/icon/__snapshots__/icon.spec.ts.snap

@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`icon should set the icon as loading after 500ms 1`] = `
-"<svg width=\\"80%\\" height=\\"80%\\" viewBox=\\"0 0 64 64\\">
-    <g>
-        <g stroke-width=\\"6\\" stroke-linecap=\\"round\\" fill=\\"none\\">
-            <path stroke=\\"currentColor\\" d=\\"M4,32 c0,15,12,28,28,28c8,0,16-4,21-9\\">
-            </path>
-            <path d=\\"M60,32 C60,16,47.464,4,32,4S4,16,4,32\\">
-            </path>
-            <animateTransform values=\\"0,32,32;360,32,32\\" attributeName=\\"transform\\" type=\\"rotate\\" repeatCount=\\"indefinite\\" dur=\\"750ms\\">
-            </animateTransform>
-        </g>
-    </g>
-</svg>"
-`;

package/src/lib/icon/icon.placeholder.ts

@@ -1,12 +0,0 @@
-export const PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
-    <g>
-        <g stroke-width="6" stroke-linecap="round" fill="none">
-            <path stroke="currentColor" d="M4,32 c0,15,12,28,28,28c8,0,16-4,21-9">
-            </path>
-            <path d="M60,32 C60,16,47.464,4,32,4S4,16,4,32">
-            </path>
-            <animateTransform values="0,32,32;360,32,32" attributeName="transform" type="rotate" repeatCount="indefinite" dur="750ms">
-            </animateTransform>
-        </g>
-    </g>
-</svg>`;

package/src/lib/icon/icon.scss

@@ -1,52 +0,0 @@
-@use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
-	$subset: primary announcement cta success alert info
-);
-
-@use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;
-
-:host {
-	display: inline-block;
-	vertical-align: sub;
-}
-
-.control {
-	@include connotation.connotation;
-
-	display: flex;
-	margin: unset;
-	color: currentColor;
-	contain: strict;
-}
-
-// TODO: add a :where selector to unset any connotation variant from a mixin level
-.control[class*="connotation"] {
-	color: var(#{connotation.$vvd-color-connotation});
-}
-
-svg {
-	margin: auto;
-	block-size: inherit;
-	inline-size: inherit;
-}
-
-/* Size */
-
-.control:not(.size-base-small):not(.size-base):not(.size-base-large) {
-	block-size: 1em;
-	inline-size: 1em;
-}
-
-.control.size-base-small {
-	block-size: 16px;
-	inline-size: 16px;
-}
-
-.control.size-base {
-	block-size: 24px;
-	inline-size: 24px;
-}
-
-.control.size-base-large {
-	block-size: 32px;
-	inline-size: 32px;
-}

package/src/lib/icon/icon.spec.ts

@@ -1,106 +0,0 @@
-import './index.ts';
-import {fixture} from '@vivid-nx/shared';
-import type {Icon} from './icon';
-
-const COMPONENT_TAG = 'vwc-icon';
-
-describe('icon', function () {
-	let element: Icon;
-
-	beforeEach(async () => {
-		element = (await fixture(
-			`<${COMPONENT_TAG}></${COMPONENT_TAG}>`
-		)) as Icon;
-	});
-	/**
-	 * @param requestTime
-	 */
-	function fakeFetch(requestTime = 4000) {
-		(global.fetch as any) = jest.fn(() => {
-			return new Promise(res => {
-				setTimeout(() => res(response), requestTime);
-			});
-		});
-	}
-
-	const svg = 'svg';
-	const response = {
-		ok: true,
-		headers: {
-			get: () => {
-				return 'image/svg+xml';
-			}
-		},
-		text: () => svg
-	};
-	const originalFetch = global.fetch;
-	const originalPromise = global.Promise;
-
-	beforeEach(function () {
-		global.Promise = require('promise'); // needed in order for promises to work with jest fake timers
-		jest.useFakeTimers('legacy');
-	});
-
-	afterEach(function () {
-		jest.useRealTimers();
-		global.fetch = originalFetch;
-		global.Promise = originalPromise;
-	});
-
-	/**
-	 *
-	 */
-	function setIconTypeAndTriggerFirstTimer() {
-		element.type = 'none';
-		jest.advanceTimersToNextTimer();
-	}
-
-	/**
-	 * @param timeInMs
-	 */
-	function setIconTypeAndAdvanceTime(timeInMs: number) {
-		element.type = 'none';
-		jest.advanceTimersByTime(timeInMs);
-	}
-
-	/**
-	 * @param iconType
-	 */
-	function setIconTypeAndRunAllTimers(iconType: string | undefined) {
-		element.type = iconType;
-		jest.runAllTimers();
-	}
-
-	it('should show nothing when first changing the icon', async function () {
-		fakeFetch(4000);
-		setIconTypeAndTriggerFirstTimer();
-
-		expect(element.svg).toEqual('');
-	});
-
-	it('should set the icon as loading after 500ms', async function () {
-		fakeFetch(4000);
-		setIconTypeAndAdvanceTime(500);
-		expect(element.svg).toMatchSnapshot();
-	});
-
-	it('should remove loading icon after 2500ms', async function () {
-		fakeFetch(4000);
-		setIconTypeAndAdvanceTime(2500);
-		expect(element.svg).toEqual('');
-	});
-
-	it('should set icon in svg after icon fetch', async function () {
-		fakeFetch(100);
-		setIconTypeAndRunAllTimers('none');
-		expect(element.svg).toEqual(svg);
-	});
-
-	it('should show empty string when no icon is available', function () {
-		fakeFetch(100);
-		setIconTypeAndRunAllTimers('none');
-		setIconTypeAndRunAllTimers(undefined);
-		expect(element.svg).toEqual('');
-	});
-
-});

package/src/lib/icon/icon.template.ts

@@ -1,23 +0,0 @@
-import { html, when } from '@microsoft/fast-element';
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-
-import { classNames } from '@microsoft/fast-web-utilities';
-import type { Icon } from './icon';
-
-const getClasses = ({
-	connotation, size,
-}: Icon) => classNames(
-	'control',
-	[`connotation-${connotation}`, Boolean(connotation)],
-	[`size-${size}`, Boolean(size)],
-);
-
-export const iconTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<Icon> = () => html`
-  <figure class="${getClasses}">
-		${when((x)=> x.svg, (x) => html<Icon>`${x.svg}`)}
-  </figure>
-	`;

package/src/lib/icon/icon.ts

@@ -1,93 +0,0 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
-import { attr, observable } from '@microsoft/fast-element';
-import { identity, memoizeWith } from 'ramda';
-import type { Connotation, Size } from '../enums';
-import { PLACEHOLDER_ICON } from './icon.placeholder';
-
-const BASE_URL = 'https://icon.resources.vonage.com'; // namespaced as 3f7739a0-a898-4f69-a82b-ad9d743170b6 on icons.resources.vonage.com
-const ICON_SET_VERSION = '4.0.27';
-
-// Start displaying placeholder if waiting more than this period of time
-const PLACEHOLDER_DELAY = 500;
-// Stop displaying placeholder if exceeding this period of time
-// (will also stop one an icon is loaded)
-const PLACEHOLDER_TIMEOUT = 2000;
-
-// const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));
-const baseUrlTemplate = (resource: string, version: string) => [BASE_URL, `v${version}`, resource].join('/');
-
-const assertIsValidResponse = ({ ok, headers }: Response) => {
-	if (!ok || headers.get('content-type') !== 'image/svg+xml') {
-		throw new Error('Something went wrong');
-	}
-};
-
-const extractSvg = (response: Response) => {
-	assertIsValidResponse(response);
-	return response.text();
-};
-
-const loadSvg = (iconId: string) => fetch(baseUrlTemplate([iconId, 'svg'].join('.'), ICON_SET_VERSION))
-	.then(extractSvg);
-
-const resolveIcon = memoizeWith(identity as () => string, (iconId = '') => (iconId.trim()
-	? loadSvg(iconId)
-	: Promise.resolve(''))) as (iconId?: string) => Promise<string>;
-
-/**
- * Types of icon connotation.
- *
- * @public
- */
-type IconConnotation = Extract<Connotation,
-| Connotation.Primary
-| Connotation.CTA
-| Connotation.Announcement
-| Connotation.Success
-| Connotation.Alert
-| Connotation.Info>;
-
-export class Icon extends FoundationElement {
-	/**
-	 * The connotation the icon should have.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: connotation
-	 */
-	@attr connotation?: IconConnotation;
-
-	@attr size?: Size;
-
-	@observable svg = '';
-
-	/**
-	 * Indicates which icon to resolve.
-	 *
-	 * @public
-	 * @remarks
-	 * HTML Attribute: type
-	 */
-	@attr type?: string;
-
-	async typeChanged() {
-		this.svg = '';
-
-		let timeout = setTimeout(() => {
-			this.svg = PLACEHOLDER_ICON;
-			timeout = setTimeout(() => {
-				if (this.svg === PLACEHOLDER_ICON) {
-					this.svg = '';
-				}
-			}, PLACEHOLDER_TIMEOUT);
-		}, PLACEHOLDER_DELAY);
-
-		await resolveIcon(this.type)
-			.then((svg) => {
-				this.svg = svg;
-			})
-			.catch(() => {
-				this.svg = '';
-			}).finally(() => { clearTimeout(timeout); });
-	}
-}

package/src/lib/icon/index.ts

@@ -1,14 +0,0 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { designSystem } from '../../shared/design-system';
-import styles from './icon.scss';
-import { Icon } from './icon';
-import { iconTemplate as template } from './icon.template';
-
-
-export const vividIcon = Icon.compose<FoundationElementDefinition>({
-	baseName: 'icon',
-	template: template as any,
-	styles,
-});
-
-designSystem.register(vividIcon());

package/src/lib/layout/README.md

@@ -1,154 +0,0 @@
-# layout
-
-Using layout, elements can be arranged easily in a variety of sizes and spaces that suit vivid design.
-
-```js
-<script type='module'>
-    import '@vonage/vivid/layout';
-</script>
-```
-
-```html preview
-<vwc-layout>
-  <img src="https://picsum.photos/id/1015/300/200">
-  <img src="https://picsum.photos/id/1016/300/200">
-  <img src="https://picsum.photos/id/1018/300/200">
-  <img src="https://picsum.photos/id/1019/300/200">
-  <img src="https://picsum.photos/id/1055/300/200">
-  <img src="https://picsum.photos/id/1050/300/200">
-</vwc-layout>
-```
-
-## Auto-sizing
-
-Use the `auto-sizing` attribute to set the initial preferred auto-sizing.
-
-- Type: `'fit'` | `'fill'`
-- Default: `'fit'`
-
-### fit
-
-```html preview
-<vwc-layout auto-sizing="fit">
-  <div style="border: 1px solid">fit</div>
-  <div style="border: 1px solid">fit</div>
-</vwc-layout>
-```
-
-### fill
-
-```html preview
-<vwc-layout auto-sizing="fill">
-  <div style="border: 1px solid">fill</div>
-  <div style="border: 1px solid">fill</div>
-</vwc-layout>
-```
-
-## Gutters
-
-Use the `gutters` attribute to set the initial preferred margin.
-
-- Type: `'base-small'` | `'base'` | `'base-large'`
-- Default: `''`
-
-```html preview
-<vwc-layout>
-  <div style="border: 1px solid">default</div>
-  <div style="border: 1px solid">default</div>
-</vwc-layout>
-<vwc-layout gutters="base-small">
-  <div style="border: 1px solid">base-small</div>
-  <div style="border: 1px solid">base-small</div>
-</vwc-layout>
-<vwc-layout gutters="base">
-  <div style="border: 1px solid">base</div>
-  <div style="border: 1px solid">base</div>
-</vwc-layout>
-<vwc-layout gutters="base-large">
-  <div style="border: 1px solid">base-large</div>
-  <div style="border: 1px solid">base-large</div>
-</vwc-layout>
-```
-
-## Column-spacing
-
-Use the `column-spacing` attribute to set the initial preferred spacing of a column.
-
-- Type: `'base-small'` | `'base'` | `'base-large'`
-- Default: `'base'`
-
-```html preview
-<vwc-layout column-spacing="base-small">
-  <div style="border: 1px solid">base-small</div>
-  <div style="border: 1px solid">base-small</div>
-</vwc-layout>
-<vwc-layout column-spacing="base">
-  <div style="border: 1px solid">base</div>
-  <div style="border: 1px solid">base</div>
-</vwc-layout>
-<vwc-layout column-spacing="base-large">
-  <div style="border: 1px solid">base-large</div>
-  <div style="border: 1px solid">base-large</div>
-</vwc-layout>
-```
-
-## Column-basis
-
-Use the `column-basis` attribute to set the initial preferred measure of a column.
-
-- Type: `'base-small'` | `'base'` | `'base-large'`
-- Default: `'base'`
-
-### base-small
-
-```html preview
-<vwc-layout column-basis="base-small">
-  <div style="border: 1px solid">base-small</div>
-  <div style="border: 1px solid">base-small</div>
-  <div style="border: 1px solid">base-small</div>
-  <div style="border: 1px solid">base-small</div>
-  <div style="border: 1px solid">base-small</div>
-</vwc-layout>
-```
-
-### base
-
-```html preview
-<vwc-layout column-basis="base">
-  <div style="border: 1px solid">base</div>
-  <div style="border: 1px solid">base</div>
-  <div style="border: 1px solid">base</div>
-  <div style="border: 1px solid">base</div>
-  <div style="border: 1px solid">base</div>
-</vwc-layout>
-```
-
-### base-large
-
-```html preview
-<vwc-layout column-basis="base-large">
-  <div style="border: 1px solid">base-large</div>
-  <div style="border: 1px solid">base-large</div>
-  <div style="border: 1px solid">base-large</div>
-  <div style="border: 1px solid">base-large</div>
-  <div style="border: 1px solid">base-large</div>
-</vwc-layout>
-```
-
-### block
-
-```html preview
-<vwc-layout column-basis="block">
-  <div style="border: 1px solid">block</div>
-  <div style="border: 1px solid">block</div>
-  <div style="border: 1px solid">block</div>
-  <div style="border: 1px solid">block</div>
-  <div style="border: 1px solid">block</div>
-</vwc-layout>
-```
-
-## CSS Custom Properties
-
-| Name                         | Description                                      | Usage                                              |
-| ---------------------------- | ------------------------------------------------ | -------------------------------------------------- |
-| --layout-grid-template-columns | controls the grid-template-columns of the layout | repeat(`auto-sizing`, minmax(`column-basis`, 1fr)) |