Document

Installation

NPM

npm install --save @junto-foundation/junto-elements

import "@junto-foundation/junto-elements"

import "@junto-foundation/junto-elements/dist/main.css"

Theming

Dark mode

Base font size: 16px

Hue: 610

Saturation: 60%

Border radius: 4px

Elements

Colors

Primary

Success

Danger

Warning

Black

White

Focus

Spacing

Typography

Font family

Avenir

Sizes

Font size 100

Font size 200

Font size 300

Font size 400

Font size 500

Font size 600

Font size 700

Font size 800

Font size 900

Font size 1000

Depth

Elements

Avatar

<j-avatar></j-avatar>

Attribute	Type	Value
src	String
hash	String
selected	Boolean
online	Boolean
initials	String
icon	String
size	string	xs sm lg xl

Badge

<j-badge>Badge</j-badge>

Attribute	Type	Value
variant	string	primary success danger warning
size	string	sm lg

Box

<j-box>Box</j-box>

Attribute	Type	Value
p	string	100 200 300 400 500 600 700 800 900
pl	string	100 200 300 400 500 600 700 800 900
pr	string	100 200 300 400 500 600 700 800 900
pt	string	100 200 300 400 500 600 700 800 900
pb	string	100 200 300 400 500 600 700 800 900
px	string	100 200 300 400 500 600 700 800 900
py	string	100 200 300 400 500 600 700 800 900
m	string	100 200 300 400 500 600 700 800 900
ml	string	100 200 300 400 500 600 700 800 900
mr	string	100 200 300 400 500 600 700 800 900
mt	string	100 200 300 400 500 600 700 800 900
mb	string	100 200 300 400 500 600 700 800 900
mx	string	100 200 300 400 500 600 700 800 900
my	string	100 200 300 400 500 600 700 800 900
bg	string	ui-100 ui-200 ui-300 ui-400 ui-500 ui-600 ui-700 ui-800 ui-900

Button

<j-button>Button</j-button>

Attribute	Type	Value
variant	string	link primary subtle transparent
size	string	xs sm lg xl
disabled	boolean
loading	boolean
square	boolean
full	boolean
circle	boolean

Carousel

Slide 1

Slide 2

Slide 3

<j-carousel>
  <j-box p="900" bg="ui-200">Slide 1</j-box>
  <j-box p="900" bg="ui-200">Slide 2</j-box>
  <j-box p="900" bg="ui-200">Slide 3</j-box>
</j-carousel>

Attribute	Type	Value
gap	string	100 200 300 400 500 600 700 800 900

Checkbox

<j-checkbox>Checkbox</j-checkbox>

Attribute	Type	Value
checked	Boolean
full	Boolean
disabled	Boolean
size	string	sm lg
value	String

Flex

Flex 1

Flex 2

Flex 3

<j-flex>
  <div>Flex 1</div>
  <div>Flex 2</div>
  <div>Flex 3</div>
</j-flex>

Attribute	Type	Value
j	string	center start end
a	string	center start end
wrap	Boolean
gap	string	100 200 300 400 500 600 700 800 900
direction	string	row row-reverse column column-reverse

Icon

<j-icon name="sun"></j-icon>

Attribute	Type	Value
name	String
size	string	sm lg
color	String
svg	string

Input

<j-input></j-input>

Attribute	Type	Value
value	string
pattern	string
label	string
size	string
placeholder	string
errorText	string
helpText	string
autocomplete	boolean
autovalidate	boolean
autofocus	boolean
disabled	boolean
full	boolean
error	boolean
required	boolean
readonly	boolean
type	string

Menu item

<j-menu>
  <j-menu-item>Menu item</j-menu-item>
  <j-menu-item>Menu item</j-menu-item>
</j-menu>

Attribute	Type	Value

Menu Group

Menu item

<j-menu-group-item title="Hello">
  <j-menu-item>Menu item</j-menu-item>
  <j-menu-item>Menu item</j-menu-item>
  <j-menu-item>Menu item</j-menu-item>
</j-menu-group-item>

Attribute	Type	Value
collapsible	Boolean
open	Boolean
title	String

Menu item

<j-menu-item>Menu item</j-menu-item>

Attribute	Type	Value
selected	Boolean
active	Boolean
label	string
value	string

Modal

Toggle

Create something

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.

<j-button>Toggle</j-button>
<j-modal>
  <header slot="header">
    <j-text variant="heading">Create something</j-text>
    <j-text variant="ingress">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only five centuries.
    </j-text>
  </header>
  <div><j-input help-text="Here is some help text"></j-input></div>
  <footer slot="footer">
    <j-flex gap="400">
      <j-button size="lg">Cancel</j-button>
      <j-button variant="primary" size="lg">Create</j-button>
    </j-flex>
  </footer>
</j-modal>

Attribute	Type	Value
size	string	xs sm lg xl
open	Boolean

Popover

Trigger

Menu item

<j-popover placement="auto" event="click">
  <j-button slot="trigger">Trigger</j-button>
  <j-menu slot="content">
    <j-menu-item>Menu item</j-menu-item>
    <j-menu-item>Menu item</j-menu-item>
  </j-menu>
</j-popover>

Attribute	Type	Value
open	Boolean
placement	string	auto auto-start auto-end top top-start top-end bottom bottom-start bottom-end right right-start right-end left left-start left-end
event	string	contextmenu mouseover click

Radio button

<j-radio-button>Radio button</j-radio-button>

Attribute	Type	Value
currentCheckedItem	string	Element undefined
formElement	string	HTMLInputElement null
checked	boolean
value	string
name	string
size	string	sm md lg
full	boolean
disabled	boolean

Select

Menu item

Menu item 2

Menu item 3

<j-select inputvalue="">
  <j-menu>
    <j-menu-item value="1">Menu item</j-menu-item>
    <j-menu-item value="2">Menu item 2</j-menu-item>
    <j-menu-item value="3">Menu item 3</j-menu-item>
  </j-menu>
</j-select>

Attribute	Type	Value
value	String
label	String
open	Boolean
inputValue	Boolean
selectedElement	string	Element undefined

Spinner

<j-spinner></j-spinner>

Attribute	Type	Value
size	string	sm lg

Tab Item

Tab item

<j-tab-item>Tab item</j-tab-item>

Attribute	Type	Value
checked	Boolean
disabled	Boolean
size	string	sm lg
variant	string	button
label	string
value	string

Tabs

Tab 1

Tab 2

Tab 323

<j-tabs>
  <j-tab-item value="1" variant="button">Tab 1</j-tab-item>
  <j-tab-item value="2" variant="button">Tab 2</j-tab-item>
  <j-tab-item value="3" variant="button">Tab 323</j-tab-item>
</j-tabs>

Attribute	Type	Value
value	String
vertical	Boolean
full	Boolean

Text

The quick brown fox jumps over the lazy dog

<j-text variant="body">The quick brown fox jumps over the lazy dog</j-text>

Attribute	Type	Value
size	string	100 200 300 400 500 600 700 800 900 1000
variant	string	heading-lg heading heading-sm subheading ingress body label footnote
tag	string	h1 h2 h3 h4 h5 h6 p small b span div
nomargin	Boolean
inline	Boolean
uppercase	Boolean
color	String
weight	String

Timestamp

<j-timestamp value="01/01/1970" locales="en"></j-timestamp>

Attribute	Type	Value
value	String
locales	String
relative	Boolean
dateStyle	string	full long medium short
timeStyle	string	full long medium short
dayPeriod	string	narrow short long
hourCycle	string	h11 h12 h23 h24
timeZone	String
weekday	string	long short narrow
era	string	long short narrow
year	string	numeric 2-digit
month	string	numeric 2-digit long short narrow
day	string	numeric 2-digit
hour	string	numeric 2-digit
minute	string	numeric 2-digit
second	string	numeric 2-digit

Toast

Toast content

<j-toast autohide="5">Toast content</j-toast>

Attribute	Type	Value
variant	string	success danger warning
open	Boolean

Toggle

<j-toggle>Toggle</j-toggle>

Attribute	Type	Value
checked	Boolean
full	Boolean
disabled	Boolean
size	string	sm lg
value	String

Tooltip

Hover over me

<j-tooltip title="Hello" placement="auto">
  <j-button>Hover over me</j-button>
</j-tooltip>

Attribute	Type	Value
open	Boolean
title	String
placement	string	auto auto-start auto-end top top-start top-end bottom bottom-start bottom-end right right-start right-end left left-start left-end