@ippon-ui/styles 0.0.2

package/dist/atom/badge/badge.code.html

@@ -0,0 +1 @@
+<span class="ippon-badge">primary</span><span class="ippon-badge"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary icon left</span></span><span class="ippon-badge"><span class="ippon-badge--text">primary icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">primary clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -secondary">secondary</span><span class="ippon-badge -secondary"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary icon left</span></span><span class="ippon-badge -secondary"><span class="ippon-badge--text">secondary icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">secondary clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -neutral">primary (neutral)</span><span class="ippon-badge -neutral"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (neutral) icon left</span></span><span class="ippon-badge -neutral"><span class="ippon-badge--text">primary (neutral) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -neutral"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (neutral) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -neutral"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">primary (neutral) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -secondary -neutral">secondary (neutral)</span><span class="ippon-badge -secondary -neutral"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (neutral) icon left</span></span><span class="ippon-badge -secondary -neutral"><span class="ippon-badge--text">secondary (neutral) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -neutral"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (neutral) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -neutral"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">secondary (neutral) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -success">primary (success)</span><span class="ippon-badge -success"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (success) icon left</span></span><span class="ippon-badge -success"><span class="ippon-badge--text">primary (success) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -success"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (success) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -success"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">primary (success) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -secondary -success">secondary (success)</span><span class="ippon-badge -secondary -success"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (success) icon left</span></span><span class="ippon-badge -secondary -success"><span class="ippon-badge--text">secondary (success) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -success"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (success) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -success"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">secondary (success) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -error">primary (error)</span><span class="ippon-badge -error"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (error) icon left</span></span><span class="ippon-badge -error"><span class="ippon-badge--text">primary (error) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -error"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (error) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -error"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">primary (error) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -secondary -error">secondary (error)</span><span class="ippon-badge -secondary -error"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (error) icon left</span></span><span class="ippon-badge -secondary -error"><span class="ippon-badge--text">secondary (error) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -error"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (error) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -error"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">secondary (error) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -warning">primary (warning)</span><span class="ippon-badge -warning"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (warning) icon left</span></span><span class="ippon-badge -warning"><span class="ippon-badge--text">primary (warning) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -warning"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (warning) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -warning"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">primary (warning) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -secondary -warning">secondary (warning)</span><span class="ippon-badge -secondary -warning"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (warning) icon left</span></span><span class="ippon-badge -secondary -warning"><span class="ippon-badge--text">secondary (warning) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -warning"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (warning) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -warning"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">secondary (warning) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -information">primary (information)</span><span class="ippon-badge -information"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (information) icon left</span></span><span class="ippon-badge -information"><span class="ippon-badge--text">primary (information) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -information"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (information) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -information"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">primary (information) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -secondary -information">secondary (information)</span><span class="ippon-badge -secondary -information"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (information) icon left</span></span><span class="ippon-badge -secondary -information"><span class="ippon-badge--text">secondary (information) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -information"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (information) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -information"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">secondary (information) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -placeholder"></span>

package/dist/atom/badge/badge.md

@@ -0,0 +1 @@
+## Badge

package/dist/atom/badge/badge.render.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><div style="display: grid; gap: 1rem; grid-template-columns: repeat(5, 1fr); justify-items: left; align-items: center"><span class="ippon-badge">primary</span><span class="ippon-badge"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary icon left</span></span><span class="ippon-badge"><span class="ippon-badge--text">primary icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">primary clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -secondary">secondary</span><span class="ippon-badge -secondary"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary icon left</span></span><span class="ippon-badge -secondary"><span class="ippon-badge--text">secondary icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">secondary clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -neutral">primary (neutral)</span><span class="ippon-badge -neutral"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (neutral) icon left</span></span><span class="ippon-badge -neutral"><span class="ippon-badge--text">primary (neutral) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -neutral"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (neutral) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -neutral"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">primary (neutral) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -secondary -neutral">secondary (neutral)</span><span class="ippon-badge -secondary -neutral"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (neutral) icon left</span></span><span class="ippon-badge -secondary -neutral"><span class="ippon-badge--text">secondary (neutral) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -neutral"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (neutral) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -neutral"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">secondary (neutral) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -success">primary (success)</span><span class="ippon-badge -success"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (success) icon left</span></span><span class="ippon-badge -success"><span class="ippon-badge--text">primary (success) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -success"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (success) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -success"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">primary (success) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -secondary -success">secondary (success)</span><span class="ippon-badge -secondary -success"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (success) icon left</span></span><span class="ippon-badge -secondary -success"><span class="ippon-badge--text">secondary (success) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -success"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (success) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -success"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">secondary (success) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -error">primary (error)</span><span class="ippon-badge -error"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (error) icon left</span></span><span class="ippon-badge -error"><span class="ippon-badge--text">primary (error) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -error"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (error) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -error"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">primary (error) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -secondary -error">secondary (error)</span><span class="ippon-badge -secondary -error"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (error) icon left</span></span><span class="ippon-badge -secondary -error"><span class="ippon-badge--text">secondary (error) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -error"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (error) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -error"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">secondary (error) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -warning">primary (warning)</span><span class="ippon-badge -warning"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (warning) icon left</span></span><span class="ippon-badge -warning"><span class="ippon-badge--text">primary (warning) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -warning"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (warning) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -warning"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">primary (warning) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -secondary -warning">secondary (warning)</span><span class="ippon-badge -secondary -warning"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (warning) icon left</span></span><span class="ippon-badge -secondary -warning"><span class="ippon-badge--text">secondary (warning) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -warning"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (warning) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -warning"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">secondary (warning) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -information">primary (information)</span><span class="ippon-badge -information"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (information) icon left</span></span><span class="ippon-badge -information"><span class="ippon-badge--text">primary (information) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -information"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">primary (information) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -information"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">primary (information) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -secondary -information">secondary (information)</span><span class="ippon-badge -secondary -information"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (information) icon left</span></span><span class="ippon-badge -secondary -information"><span class="ippon-badge--text">secondary (information) icon right</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -information"><span class="ippon-badge--icon ippon-ion-alert-circle-outline" role="presentation"></span><span class="ippon-badge--text">secondary (information) icon both</span><span class="ippon-badge--icon ippon-ion-close-outline" role="presentation"></span></span><span class="ippon-badge -secondary -information"><button class="ippon-badge--icon -clickable ippon-ion-alert-circle-outline"></button><span class="ippon-badge--text">secondary (information) clickable</span><button class="ippon-badge--icon -clickable ippon-ion-close-outline"></button></span><span class="ippon-badge -placeholder"></span></div></body></html>

package/dist/atom/button/button.code.html

@@ -0,0 +1 @@
+<button class="ippon-button -small">Default primary (small)</button><button class="ippon-button -secondary -small">Default secondary (small)</button><button class="ippon-button -outline -small">Default outline (small)</button><button class="ippon-button -text -small">Default text (small)</button><button class="ippon-button -small" disabled="disabled">disabled</button><button class="ippon-button -small -loading" disabled="disabled" aria-busy="true">loading</button><button class="ippon-button">Default primary</button><button class="ippon-button -secondary">Default secondary</button><button class="ippon-button -outline">Default outline</button><button class="ippon-button -text">Default text</button><button class="ippon-button" disabled="disabled">disabled</button><button class="ippon-button -loading" disabled="disabled" aria-busy="true">loading</button><button class="ippon-button -large">Default primary (large)</button><button class="ippon-button -secondary -large">Default secondary (large)</button><button class="ippon-button -outline -large">Default outline (large)</button><button class="ippon-button -text -large">Default text (large)</button><button class="ippon-button -large" disabled="disabled">disabled</button><button class="ippon-button -large -loading" disabled="disabled" aria-busy="true">loading</button><button class="ippon-button -success">Success primary</button><button class="ippon-button -success -secondary">Success secondary</button><button class="ippon-button -success -outline">Success outline</button><button class="ippon-button -success -text">Success text</button><button class="ippon-button -success" disabled="disabled">disabled</button><button class="ippon-button -success -loading" disabled="disabled" aria-busy="true">loading</button><button class="ippon-button -error">Error primary</button><button class="ippon-button -error -secondary">Error secondary</button><button class="ippon-button -error -outline">Error outline</button><button class="ippon-button -error -text">Error text</button><button class="ippon-button -error" disabled="disabled">disabled</button><button class="ippon-button -error -loading" disabled="disabled" aria-busy="true">loading</button><button class="ippon-button -information">Information primary</button><button class="ippon-button -information -secondary">Information secondary</button><button class="ippon-button -information -outline">Information outline</button><button class="ippon-button -information -text">Information text</button><button class="ippon-button -information" disabled="disabled">disabled</button><button class="ippon-button -information -loading" disabled="disabled" aria-busy="true">loading</button><button class="ippon-button -warning">Warning primary</button><button class="ippon-button -warning -secondary">Warning secondary</button><button class="ippon-button -warning -outline">Warning outline</button><button class="ippon-button -warning -text">Warning text</button><button class="ippon-button -warning" disabled="disabled">disabled</button><button class="ippon-button -warning -loading" disabled="disabled" aria-busy="true">loading</button><button class="ippon-button -neutral">Neutral primary</button><button class="ippon-button -neutral -secondary">Neutral secondary</button><button class="ippon-button -neutral -outline">Neutral outline</button><button class="ippon-button -neutral -text">Neutral text</button><button class="ippon-button -neutral" disabled="disabled">disabled</button><button class="ippon-button -neutral -loading" disabled="disabled" aria-busy="true">loading</button><button class="ippon-button -small"><span class="ippon-button--icon ippon-ion-heart" role="presentation"></span></button><button class="ippon-button -secondary -small"><span class="ippon-button--icon ippon-ion-logo-angular" role="presentation"></span><span class="ippon-button--text">Icon left</span></button><button class="ippon-button -outline -small"><span class="ippon-button--text">Icon right</span><span class="ippon-button--icon ippon-ion-search" role="presentation"></span></button><button class="ippon-button -text -small"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Icon both</span><span class="ippon-button--icon ippon-ion-add" role="presentation"></span></button><button class="ippon-button -small" disabled="disabled"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Disabled</span><span class="ippon-button--icon ippon-ion-add" role="presentation"></span></button><button class="ippon-button -small -loading" disabled="disabled" aria-busy="true"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Loading</span><span class="ippon-button--icon -loading ippon-ion-sync" role="presentation"></span></button><button class="ippon-button"><span class="ippon-button--icon ippon-ion-heart" role="presentation"></span></button><button class="ippon-button -secondary"><span class="ippon-button--icon ippon-ion-logo-angular" role="presentation"></span><span class="ippon-button--text">Icon left</span></button><button class="ippon-button -outline"><span class="ippon-button--text">Icon right</span><span class="ippon-button--icon ippon-ion-search" role="presentation"></span></button><button class="ippon-button -text"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Icon both</span><span class="ippon-button--icon ippon-ion-add" role="presentation"></span></button><button class="ippon-button" disabled="disabled"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Disabled</span><span class="ippon-button--icon ippon-ion-add" role="presentation"></span></button><button class="ippon-button -loading" disabled="disabled" aria-busy="true"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Loading</span><span class="ippon-button--icon -loading ippon-ion-sync" role="presentation"></span></button><button class="ippon-button -large"><span class="ippon-button--icon ippon-ion-heart" role="presentation"></span></button><button class="ippon-button -secondary -large"><span class="ippon-button--icon ippon-ion-logo-angular" role="presentation"></span><span class="ippon-button--text">Icon left</span></button><button class="ippon-button -outline -large"><span class="ippon-button--text">Icon right</span><span class="ippon-button--icon ippon-ion-search" role="presentation"></span></button><button class="ippon-button -text -large"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Icon both</span><span class="ippon-button--icon ippon-ion-add" role="presentation"></span></button><button class="ippon-button -large" disabled="disabled"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Disabled</span><span class="ippon-button--icon ippon-ion-add" role="presentation"></span></button><button class="ippon-button -large -loading" disabled="disabled" aria-busy="true"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Loading</span><span class="ippon-button--icon -loading ippon-ion-sync" role="presentation"></span></button>

package/dist/atom/button/button.md

@@ -0,0 +1,31 @@
+## Button
+
+**Colors:**
+
+- Default
+- Success `-success`
+- Error `-error`
+- Information `-information`
+- Warning `-warning`
+- Neutral `-neutral`
+
+**Variants:**
+
+- Primary
+- Secondary `-secondary`
+- Outline `-outline`
+- Text `-text`
+
+**States:**
+
+- Loading `-loading` (adds `disabled` and `aria-busy="true"`)
+  - When a right icon is present, replace it with a `sync` icon (the CSS animation is handled by `-loading`)
+
+**Icons:**
+
+If you use [icons]([[TIKUI_BASEPATH]]icons/index.html), don't forget to wrap each child in a **part**:
+
+- `icon-button--icon` for the icon
+- `icon-button--text` for the text
+
+> It's because the space before and after the icon is different from a _text_ or an _icon_.

package/dist/atom/button/button.render.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><div style="display: grid; grid-template-columns: repeat(6, auto); gap: 1rem; justify-items: left; align-items: center"><div>Primary</div><div>Secondary</div><div>Outline</div><div>Text</div><div>Disabled</div><div>Loading</div><button class="ippon-button -small">Default primary (small)</button><button class="ippon-button -secondary -small">Default secondary (small)</button><button class="ippon-button -outline -small">Default outline (small)</button><button class="ippon-button -text -small">Default text (small)</button><button class="ippon-button -small" disabled>disabled</button><button class="ippon-button -small -loading" disabled aria-busy="true">loading</button><button class="ippon-button">Default primary</button><button class="ippon-button -secondary">Default secondary</button><button class="ippon-button -outline">Default outline</button><button class="ippon-button -text">Default text</button><button class="ippon-button" disabled>disabled</button><button class="ippon-button -loading" disabled aria-busy="true">loading</button><button class="ippon-button -large">Default primary (large)</button><button class="ippon-button -secondary -large">Default secondary (large)</button><button class="ippon-button -outline -large">Default outline (large)</button><button class="ippon-button -text -large">Default text (large)</button><button class="ippon-button -large" disabled>disabled</button><button class="ippon-button -large -loading" disabled aria-busy="true">loading</button><button class="ippon-button -success">Success primary</button><button class="ippon-button -success -secondary">Success secondary</button><button class="ippon-button -success -outline">Success outline</button><button class="ippon-button -success -text">Success text</button><button class="ippon-button -success" disabled>disabled</button><button class="ippon-button -success -loading" disabled aria-busy="true">loading</button><button class="ippon-button -error">Error primary</button><button class="ippon-button -error -secondary">Error secondary</button><button class="ippon-button -error -outline">Error outline</button><button class="ippon-button -error -text">Error text</button><button class="ippon-button -error" disabled>disabled</button><button class="ippon-button -error -loading" disabled aria-busy="true">loading</button><button class="ippon-button -information">Information primary</button><button class="ippon-button -information -secondary">Information secondary</button><button class="ippon-button -information -outline">Information outline</button><button class="ippon-button -information -text">Information text</button><button class="ippon-button -information" disabled>disabled</button><button class="ippon-button -information -loading" disabled aria-busy="true">loading</button><button class="ippon-button -warning">Warning primary</button><button class="ippon-button -warning -secondary">Warning secondary</button><button class="ippon-button -warning -outline">Warning outline</button><button class="ippon-button -warning -text">Warning text</button><button class="ippon-button -warning" disabled>disabled</button><button class="ippon-button -warning -loading" disabled aria-busy="true">loading</button><button class="ippon-button -neutral">Neutral primary</button><button class="ippon-button -neutral -secondary">Neutral secondary</button><button class="ippon-button -neutral -outline">Neutral outline</button><button class="ippon-button -neutral -text">Neutral text</button><button class="ippon-button -neutral" disabled>disabled</button><button class="ippon-button -neutral -loading" disabled aria-busy="true">loading</button><button class="ippon-button -small"><span class="ippon-button--icon ippon-ion-heart" role="presentation"></span></button><button class="ippon-button -secondary -small"><span class="ippon-button--icon ippon-ion-logo-angular" role="presentation"></span><span class="ippon-button--text">Icon left</span></button><button class="ippon-button -outline -small"><span class="ippon-button--text">Icon right</span><span class="ippon-button--icon ippon-ion-search" role="presentation"></span></button><button class="ippon-button -text -small"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Icon both</span><span class="ippon-button--icon ippon-ion-add" role="presentation"></span></button><button class="ippon-button -small" disabled><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Disabled</span><span class="ippon-button--icon ippon-ion-add" role="presentation"></span></button><button class="ippon-button -small -loading" disabled aria-busy="true"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Loading</span><span class="ippon-button--icon -loading ippon-ion-sync" role="presentation"></span></button><button class="ippon-button"><span class="ippon-button--icon ippon-ion-heart" role="presentation"></span></button><button class="ippon-button -secondary"><span class="ippon-button--icon ippon-ion-logo-angular" role="presentation"></span><span class="ippon-button--text">Icon left</span></button><button class="ippon-button -outline"><span class="ippon-button--text">Icon right</span><span class="ippon-button--icon ippon-ion-search" role="presentation"></span></button><button class="ippon-button -text"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Icon both</span><span class="ippon-button--icon ippon-ion-add" role="presentation"></span></button><button class="ippon-button" disabled><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Disabled</span><span class="ippon-button--icon ippon-ion-add" role="presentation"></span></button><button class="ippon-button -loading" disabled aria-busy="true"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Loading</span><span class="ippon-button--icon -loading ippon-ion-sync" role="presentation"></span></button><button class="ippon-button -large"><span class="ippon-button--icon ippon-ion-heart" role="presentation"></span></button><button class="ippon-button -secondary -large"><span class="ippon-button--icon ippon-ion-logo-angular" role="presentation"></span><span class="ippon-button--text">Icon left</span></button><button class="ippon-button -outline -large"><span class="ippon-button--text">Icon right</span><span class="ippon-button--icon ippon-ion-search" role="presentation"></span></button><button class="ippon-button -text -large"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Icon both</span><span class="ippon-button--icon ippon-ion-add" role="presentation"></span></button><button class="ippon-button -large" disabled><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Disabled</span><span class="ippon-button--icon ippon-ion-add" role="presentation"></span></button><button class="ippon-button -large -loading" disabled aria-busy="true"><span class="ippon-button--icon ippon-ion-remove" role="presentation"></span><span class="ippon-button--text">Loading</span><span class="ippon-button--icon -loading ippon-ion-sync" role="presentation"></span></button></div></body></html>

package/dist/atom/icon/icon.code.html

@@ -0,0 +1 @@
+<span class="ippon-icon ippon-ion-add" role="presentation"></span><span class="ippon-icon -size-24 ippon-ion-close" role="presentation"></span><span class="ippon-icon -color-brand-primary ippon-ion-close" role="presentation"></span>

package/dist/atom/icon/icon.md

@@ -0,0 +1,11 @@
+## Icon
+
+The `icon` atom represents a graphical icon element from the Ionicons library.
+
+**Usage**
+
+Icons are rendered using the `ippon-icon` class with the `ippon-ion-{name}` classes to specify which icon to display from the Ionicons library.
+
+**Sizing**
+
+Icons inherit their size from the parent element's font size. They maintain a 1:1 aspect ratio.

package/dist/atom/icon/icon.render.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><div style="font-size: 2rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); justify-items: center; align-items: center"><span class="ippon-icon ippon-ion-add" role="presentation"></span><span class="ippon-icon -size-24 ippon-ion-close" role="presentation"></span><span class="ippon-icon -color-brand-primary ippon-ion-close" role="presentation"></span></div></body></html>

package/dist/atom/ion/ion.code.html

@@ -0,0 +1 @@
+<span class="ippon-ion-home" role="presentation"></span><span class="ippon-ion-home-outline" role="presentation"></span><span class="ippon-ion-home-sharp" role="presentation"></span><span class="ippon-ion-logo-angular" role="presentation"></span><span class="ippon-ion-logo-react" role="presentation"></span><span class="ippon-ion-logo-vue" role="presentation"></span>

package/dist/atom/ion/ion.md

@@ -0,0 +1,11 @@
+## Ion (Icons)
+
+Ion are based on _Ionicons_, the set is [available here]([[TIKUI_BASEPATH]]icons/index.html).
+
+There is two kinds of icons:
+
+- Classic ones: start with `ippon-ion-` followed by suffix (Variant):
+  - Nothing: the default one (**Filled**).
+  - `-outline` for the **outline** version.
+  - `-sharp` for the **sharp** version.
+- Logo ones: start with `ippon-ion-logo-` followed by the name of the logo.

package/dist/atom/ion/ion.render.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><div style="font-size: 2rem; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); justify-items: center; align-items: center"><span class="ippon-ion-home" role="presentation"></span><span class="ippon-ion-home-outline" role="presentation"></span><span class="ippon-ion-home-sharp" role="presentation"></span><span class="ippon-ion-logo-angular" role="presentation"></span><span class="ippon-ion-logo-react" role="presentation"></span><span class="ippon-ion-logo-vue" role="presentation"></span></div></body></html>

package/dist/atom/meter/meter.code.html

@@ -0,0 +1 @@
+<div class="ippon-meter" role="meter" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="--ippon-meter-percentage: 0%"></div><div class="ippon-meter" role="meter" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="--ippon-meter-percentage: 25%"></div><div class="ippon-meter" role="meter" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="--ippon-meter-percentage: 50%"></div><div class="ippon-meter" role="meter" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="--ippon-meter-percentage: 75%"></div><div class="ippon-meter" role="meter" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="--ippon-meter-percentage: 100%"></div><div class="ippon-meter" role="meter" aria-valuenow="150" aria-valuemin="0" aria-valuemax="200" style="--ippon-meter-percentage: 75%"></div>

package/dist/atom/meter/meter.md

@@ -0,0 +1,7 @@
+## Meter
+
+A meter component to display a gauge indicator with a minimum, current, and maximum value.
+
+**Accessibility:**
+
+Uses ARIA `role="meter"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` attributes for proper accessibility support.

package/dist/atom/meter/meter.render.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><div style="display: grid; gap: 1rem"><div class="ippon-meter" role="meter" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="--ippon-meter-percentage: 0%"></div><div class="ippon-meter" role="meter" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="--ippon-meter-percentage: 25%"></div><div class="ippon-meter" role="meter" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="--ippon-meter-percentage: 50%"></div><div class="ippon-meter" role="meter" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="--ippon-meter-percentage: 75%"></div><div class="ippon-meter" role="meter" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="--ippon-meter-percentage: 100%"></div><div class="ippon-meter" role="meter" aria-valuenow="150" aria-valuemin="0" aria-valuemax="200" style="--ippon-meter-percentage: 75%"></div></div></body></html>

package/dist/atom/progress/progress.code.html

@@ -0,0 +1 @@
+<div class="ippon-progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-busy="aria-busy" style="--ippon-progress-percentage: 0%"></div><div class="ippon-progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-busy="aria-busy" style="--ippon-progress-percentage: 25%"></div><div class="ippon-progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-busy="aria-busy" style="--ippon-progress-percentage: 50%"></div><div class="ippon-progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-busy="aria-busy" style="--ippon-progress-percentage: 75%"></div><div class="ippon-progress" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="--ippon-progress-percentage: 100%"></div><div class="ippon-progress" role="progressbar" aria-valuenow="150" aria-valuemin="0" aria-valuemax="200" aria-busy="aria-busy" style="--ippon-progress-percentage: 75%"></div>

package/dist/atom/progress/progress.md

@@ -0,0 +1,7 @@
+## Progress
+
+A progress component to display the completion progress of a task.
+
+**Accessibility:**
+
+Uses ARIA `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` attributes for proper accessibility support.

package/dist/atom/progress/progress.render.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><div style="display: grid; gap: 1rem"><div class="ippon-progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-busy style="--ippon-progress-percentage: 0%"></div><div class="ippon-progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-busy style="--ippon-progress-percentage: 25%"></div><div class="ippon-progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-busy style="--ippon-progress-percentage: 50%"></div><div class="ippon-progress" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-busy style="--ippon-progress-percentage: 75%"></div><div class="ippon-progress" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="--ippon-progress-percentage: 100%"></div><div class="ippon-progress" role="progressbar" aria-valuenow="150" aria-valuemin="0" aria-valuemax="200" aria-busy style="--ippon-progress-percentage: 75%"></div></div></body></html>

package/dist/atom/tab/tab.code.html

@@ -0,0 +1 @@
+<button class="ippon-tab" role="tab" id="tab-1" aria-controls="panel-id">Tab 1</button><button class="ippon-tab" role="tab" id="tab-2" aria-controls="panel-id" aria-selected="true" tabindex="-1">Tab 2</button><a class="ippon-tab" role="tab" id="tab-3" aria-controls="panel-id" href="#tab3">Tab 3</a>

package/dist/atom/tab/tab.md

@@ -0,0 +1 @@
+## Tab

package/dist/atom/tab/tab.render.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><button class="ippon-tab" role="tab" id="tab-1" aria-controls="panel-id">Tab 1</button><button class="ippon-tab" role="tab" id="tab-2" aria-controls="panel-id" aria-selected="true" tabindex="-1">Tab 2</button><a class="ippon-tab" role="tab" id="tab-3" aria-controls="panel-id" href="#tab3">Tab 3</a></body></html>

package/dist/atom/text/text.code.html

@@ -0,0 +1 @@
+<span class="ippon-text -small -body">Body Small</span><span class="ippon-text -small -body -bold">Body Small bold</span><span class="ippon-text -body">Body Medium</span><span class="ippon-text -body -bold">Body Medium bold</span><span class="ippon-text -large -body">Body Large</span><span class="ippon-text -large -body -bold">Body Large bold</span><span class="ippon-text -small -label">Label Small</span><span class="ippon-text -small -label -bold">Label Small bold</span><span class="ippon-text -label">Label Medium</span><span class="ippon-text -label -bold">Label Medium bold</span><span class="ippon-text -large -label">Label Large</span><span class="ippon-text -large -label -bold">Label Large bold</span><span class="ippon-text -body -color-neutral-tertiary-inversed">Color Neutral Tertiary Inversed</span><span class="ippon-text -small -body -placeholder"></span><span class="ippon-text -body -placeholder"></span><span class="ippon-text -large -body -placeholder"></span><span class="ippon-text -label -placeholder"></span>

package/dist/atom/text/text.md

@@ -0,0 +1,5 @@
+## Text
+
+**Placeholder (Loading State)**
+
+The `-placeholder` alternative displays a shimmer animation, typically used during content loading.

package/dist/atom/text/text.render.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><div style="display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: left"><span class="ippon-text -small -body">Body Small</span><span class="ippon-text -small -body -bold">Body Small bold</span><span class="ippon-text -body">Body Medium</span><span class="ippon-text -body -bold">Body Medium bold</span><span class="ippon-text -large -body">Body Large</span><span class="ippon-text -large -body -bold">Body Large bold</span><span class="ippon-text -small -label">Label Small</span><span class="ippon-text -small -label -bold">Label Small bold</span><span class="ippon-text -label">Label Medium</span><span class="ippon-text -label -bold">Label Medium bold</span><span class="ippon-text -large -label">Label Large</span><span class="ippon-text -large -label -bold">Label Large bold</span><span class="ippon-text -body -color-neutral-tertiary-inversed">Color Neutral Tertiary Inversed</span><span class="ippon-text -small -body -placeholder"></span><span class="ippon-text -body -placeholder"></span><span class="ippon-text -large -body -placeholder"></span><span class="ippon-text -label -placeholder"></span></div></body></html>

package/dist/atom/title/title.code.html

@@ -0,0 +1 @@
+<h1 class="ippon-title">Title h1</h1><h2 class="ippon-title">Title h2</h2><h3 class="ippon-title">Title h3</h3><h4 class="ippon-title">Title h4</h4><h5 class="ippon-title">Title h5</h5><h2 class="ippon-title -l1">Title h2 (alternative level 1)</h2><h1 class="ippon-title -l2">Title h1 (alternative level 2)</h1><h5 class="ippon-title -l3">Title h5 (alternative level 3)</h5><h2 class="ippon-title -l4">Title h2 (alternative level 4)</h2><h3 class="ippon-title -l5">Title h3 (alternative level 5)</h3><h1 class="ippon-title -placeholder"></h1><h2 class="ippon-title -placeholder"></h2><h3 class="ippon-title -placeholder"></h3><h4 class="ippon-title -placeholder"></h4><h5 class="ippon-title -placeholder"></h5><h2 class="ippon-title -l1 -placeholder"></h2><h1 class="ippon-title -l2 -placeholder"></h1><h5 class="ippon-title -l3 -placeholder"></h5><h2 class="ippon-title -l4 -placeholder"></h2><h3 class="ippon-title -l5 -placeholder"></h3>

package/dist/atom/title/title.md

@@ -0,0 +1,9 @@
+## Title
+
+The `title` will have an associated size depending on the heading level (e.g., `h1`, `h2`, …).
+
+Alternatives classes can be used to change the **level** using alternative classes (e.g., `-l1`, `-l2`, …).
+
+**Placeholder (Loading State)**
+
+The `-placeholder` alternative displays a shimmer animation, typically used during content loading.

package/dist/atom/title/title.render.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><div style="display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start"><h1 class="ippon-title">Title h1</h1><h2 class="ippon-title">Title h2</h2><h3 class="ippon-title">Title h3</h3><h4 class="ippon-title">Title h4</h4><h5 class="ippon-title">Title h5</h5><h2 class="ippon-title -l1">Title h2 (alternative level 1)</h2><h1 class="ippon-title -l2">Title h1 (alternative level 2)</h1><h5 class="ippon-title -l3">Title h5 (alternative level 3)</h5><h2 class="ippon-title -l4">Title h2 (alternative level 4)</h2><h3 class="ippon-title -l5">Title h3 (alternative level 5)</h3><h1 class="ippon-title -placeholder"></h1><h2 class="ippon-title -placeholder"></h2><h3 class="ippon-title -placeholder"></h3><h4 class="ippon-title -placeholder"></h4><h5 class="ippon-title -placeholder"></h5><h2 class="ippon-title -l1 -placeholder"></h2><h1 class="ippon-title -l2 -placeholder"></h1><h5 class="ippon-title -l3 -placeholder"></h5><h2 class="ippon-title -l4 -placeholder"></h2><h3 class="ippon-title -l5 -placeholder"></h3></div></body></html>

package/dist/atom/title-display/title-display.code.html

@@ -0,0 +1 @@
+<h1 class="ippon-title-display">Title display h1</h1><h2 class="ippon-title-display">Title display h2</h2><h3 class="ippon-title-display">Title display h3</h3><h2 class="ippon-title-display -large">Title display h2 (alternative large)</h2><h1 class="ippon-title-display -medium">Title display h1 (alternative medium)</h1><h5 class="ippon-title-display -small">Title display h5 (alternative small)</h5>

package/dist/atom/title-display/title-display.md

@@ -0,0 +1,5 @@
+## Title display
+
+The `title-display` will have an associated size depending on the heading level (e.g., `h1`, `h2`, …).
+
+Alternatives classes can be used to change the size using alternative classes (e.g., `-large`, `-medium`, …).

package/dist/atom/title-display/title-display.render.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>Tikui</title><link href="../../fonts/open-sans/400.css" rel="stylesheet"><link href="../../fonts/open-sans/600.css" rel="stylesheet"><link href="../../fonts/open-sans/700.css" rel="stylesheet"><link href="../../fonts/saira-extra-condensed/700.css" rel="stylesheet"><link href="../../icons/ionicons.css" rel="stylesheet"><link href="../../tikui.css" rel="stylesheet"><link href="../../doc.css" rel="stylesheet"></head><body><h1 class="ippon-title-display">Title display h1</h1><h2 class="ippon-title-display">Title display h2</h2><h3 class="ippon-title-display">Title display h3</h3><h2 class="ippon-title-display -large">Title display h2 (alternative large)</h2><h1 class="ippon-title-display -medium">Title display h1 (alternative medium)</h1><h5 class="ippon-title-display -small">Title display h5 (alternative small)</h5></body></html>

package/dist/doc.css

@@ -0,0 +1 @@
+.ipp-doc-table{width:100%;border-collapse:collapse;font-family:var(--ippon-typography-font)}.ipp-doc-table--cell{padding:.5rem;text-align:left}.ipp-doc-table--cell.-minimal{width:0}.ipp-doc-container{container-type:inline-size}.ipp-doc-slot{box-sizing:border-box;border:var(--ippon-size-4) solid var(--ippon-color-brand-border);background-color:var(--ippon-color-brand-surface-primary);padding:var(--ippon-size-16);color:var(--ippon-color-brand-text-icon-on-primary)}/*# sourceMappingURL=doc.css.map */

package/dist/doc.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/token/_doctable.scss","../src/organism/grid/_docgrid.scss"],"names":[],"mappings":"AAAA,eACE,WACA,yBACA,yCAEA,qBACE,cACA,gBAEA,8BACE,QCVN,mBACE,2BAGF,cACE,sBACA,iEACA,0DACA,6BACA","file":"doc.css","sourcesContent":[".ipp-doc-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-family: var(--ippon-typography-font);\n\n  &--cell {\n    padding: 0.5rem;\n    text-align: left;\n\n    &.-minimal {\n      width: 0;\n    }\n  }\n}\n",".ipp-doc-container {\n  container-type: inline-size;\n}\n\n.ipp-doc-slot {\n  box-sizing: border-box;\n  border: var(--ippon-size-4) solid var(--ippon-color-brand-border);\n  background-color: var(--ippon-color-brand-surface-primary);\n  padding: var(--ippon-size-16);\n  color: var(--ippon-color-brand-text-icon-on-primary);\n}\n"]}

package/dist/documentation/assets/atom-background.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="2093px" height="2093px" viewBox="0 0 2093 2093" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>56DAB0FA-7AA3-47E1-A7EE-7B4A0C1394C7</title>
+    <g id="Tikui" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Home" transform="translate(-488.000000, 1133.000000)" stroke="#FFD5C1">
+            <g id="SECTION-0" transform="translate(104.000000, -1133.000000)">
+                <g id="Group-2" transform="translate(384.000000, 0.000000)">
+                    <circle id="Oval" stroke-width="2" cx="1046.5" cy="1046.5" r="1045.5"></circle>
+                    <circle id="Oval" stroke-width="1.5" fill="#FFD5C1" cx="862.5" cy="1230.5" r="610.75"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/dist/documentation/lib/@fontsource/montserrat/700.css

@@ -0,0 +1,49 @@
+/* montserrat-cyrillic-ext-700-normal */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/montserrat-cyrillic-ext-700-normal.woff2) format('woff2'), url(./files/montserrat-cyrillic-ext-700-normal.woff) format('woff');
+  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
+}
+
+/* montserrat-cyrillic-700-normal */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/montserrat-cyrillic-700-normal.woff2) format('woff2'), url(./files/montserrat-cyrillic-700-normal.woff) format('woff');
+  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
+}
+
+/* montserrat-vietnamese-700-normal */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/montserrat-vietnamese-700-normal.woff2) format('woff2'), url(./files/montserrat-vietnamese-700-normal.woff) format('woff');
+  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
+}
+
+/* montserrat-latin-ext-700-normal */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/montserrat-latin-ext-700-normal.woff2) format('woff2'), url(./files/montserrat-latin-ext-700-normal.woff) format('woff');
+  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+
+/* montserrat-latin-700-normal */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(./files/montserrat-latin-700-normal.woff2) format('woff2'), url(./files/montserrat-latin-700-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}