From bcb721deb7cf850dda8bd30f4e180c6b40b226f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= <matuzalemteles@gmail.com>
Date: Wed, 21 Feb 2018 18:36:03 -0300
Subject: [PATCH 1/3] Update Button markup on claycss | Fixes #613

---
 .../src/pages/docs/components/buttons.md         | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/claycss.com/src/pages/docs/components/buttons.md b/packages/claycss.com/src/pages/docs/components/buttons.md
index 40c785319b..dd02afa436 100644
--- a/packages/claycss.com/src/pages/docs/components/buttons.md
+++ b/packages/claycss.com/src/pages/docs/components/buttons.md
@@ -258,9 +258,11 @@ weight: 100
 > This button type is used only in sites and not in administration. The icon emphasizes and helps to understand the action. The label must be the same icon purpose.
 
 <button class="btn btn-secondary" type="button">
-	<svg aria-hidden="true" class="lexicon-icon lexicon-icon-blogs">
-		<use xlink:href="/vendor/lexicon/icons.svg#share"></use>
-	</svg>
+	<span class="inline-item inline-item-before">
+		<svg aria-hidden="true" class="lexicon-icon lexicon-icon-blogs">
+			<use xlink:href="/vendor/lexicon/icons.svg#share"></use>
+		</svg>
+	</span>
 	Share
 </button>
 
@@ -282,9 +284,11 @@ weight: 100
 ```
 ```text/html
 <button class="btn btn-secondary" type="button">
-	<svg aria-hidden="true" class="lexicon-icon lexicon-icon-blogs">
-		<use xlink:href="/vendor/lexicon/icons.svg#share"></use>
-	</svg>
+	<span class="inline-item inline-item-before">
+		<svg aria-hidden="true" class="lexicon-icon lexicon-icon-blogs">
+			<use xlink:href="/vendor/lexicon/icons.svg#share"></use>
+		</svg>
+	</span>
 	Share
 </button>
 ```

From c517b049042dc85b1a6acdeef89ee1a934f59ba8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= <matuzalemteles@gmail.com>
Date: Wed, 21 Feb 2018 18:37:08 -0300
Subject: [PATCH 2/3] Update Dropdown markup | Fixes #613

---
 .../src/pages/docs/components/dropdowns.md    | 116 +++++++-----------
 1 file changed, 41 insertions(+), 75 deletions(-)

diff --git a/packages/claycss.com/src/pages/docs/components/dropdowns.md b/packages/claycss.com/src/pages/docs/components/dropdowns.md
index 72895a0b7b..eb4bad23c6 100644
--- a/packages/claycss.com/src/pages/docs/components/dropdowns.md
+++ b/packages/claycss.com/src/pages/docs/components/dropdowns.md
@@ -78,23 +78,15 @@ weight: 100
 		<ul class="list-unstyled">
 			<li><a class="dropdown-item" href="#1">Edit</a></li>
 			<li><a class="dropdown-item" href="#2">Preview</a></li>
-		</ul>
-		<div class="dropdown-divider"></div>
-		<ul class="list-unstyled">
+			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 			<li><a class="dropdown-item" href="#3">Expire</a></li>
 			<li><a class="dropdown-item" href="#4">View History</a></li>
-		</ul>
-		<div class="dropdown-divider"></div>
-		<ul class="list-unstyled">
+			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 			<li><a class="dropdown-item" href="#5">Permissions</a></li>
-		</ul>
-		<div class="dropdown-divider"></div>
-		<ul class="list-unstyled">
+			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 			<li><a class="dropdown-item" href="#6">Copy</a></li>
 			<li><a class="dropdown-item" href="#7">Move</a></li>
-		</ul>
-		<div class="dropdown-divider"></div>
-		<ul class="list-unstyled">
+			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 			<li><a class="dropdown-item" href="#8">Move to Recycle Bin</a></li>
 		</ul>
 	</div>
@@ -156,23 +148,15 @@ weight: 100
 	<ul class="list-unstyled">
 		<li><a class="dropdown-item" href="#1">Edit</a></li>
 		<li><a class="dropdown-item" href="#2">Preview</a></li>
-	</ul>
-	<div class="dropdown-divider"></div>
-	<ul class="list-unstyled">
+		<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 		<li><a class="dropdown-item" href="#3">Expire</a></li>
 		<li><a class="dropdown-item" href="#4">View History</a></li>
-	</ul>
-	<div class="dropdown-divider"></div>
-	<ul class="list-unstyled">
+		<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 		<li><a class="dropdown-item" href="#5">Permissions</a></li>
-	</ul>
-	<div class="dropdown-divider"></div>
-	<ul class="list-unstyled">
+		<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 		<li><a class="dropdown-item" href="#6">Copy</a></li>
 		<li><a class="dropdown-item" href="#7">Move</a></li>
-	</ul>
-	<div class="dropdown-divider"></div>
-	<ul class="list-unstyled">
+		<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 		<li><a class="dropdown-item" href="#8">Move to Recycle Bin</a></li>
 	</ul>
 </div>
@@ -205,10 +189,10 @@ weight: 100
 					</label>
 				</div>
 			</li>
-			<li class="disabled dropdown-item">
+			<li class="dropdown-item">
 				<div class="custom-control custom-checkbox">
 					<label>
-						<input disabled class="custom-control-input" type="checkbox">
+						<input disabled="disabled" class="custom-control-input" type="checkbox">
 						<span class="custom-control-label">
 							<span class="custom-control-label-text">Disabled Option</span>
 						</span>
@@ -278,10 +262,10 @@ weight: 100
 				</label>
 			</div>
 		</li>
-		<li class="disabled dropdown-item">
+		<li class="dropdown-item">
 			<div class="custom-control custom-checkbox">
 				<label>
-					<input disabled class="custom-control-input" type="checkbox">
+					<input disabled="disabled" class="custom-control-input" type="checkbox">
 					<span class="custom-control-label">
 						<span class="custom-control-label-text">Disabled Option</span>
 					</span>
@@ -369,10 +353,12 @@ weight: 100
 				</div>
 			</div>
 		</div>
-		<a class="active dropdown-item" href="#1">Selected Option</a>
-		<a class="dropdown-item" href="#2">Normal Option</a>
-		<a class="disabled dropdown-item" href="#3">Disabled Option</a>
 	</form>
+	<ul class="list-unstyled">
+		<li><a class="active dropdown-item" href="#1">Selected Option</a></li>
+		<li><a class="dropdown-item" href="#2">Normal Option</a></li>
+		<li><a class="disabled dropdown-item" href="#3">Disabled Option</a></li>
+	</ul>
 </div>
 ```
 
@@ -404,7 +390,7 @@ weight: 100
 				</a>
 			</li>
 			<li>
-				<a class="disabled dropdown-item" href="#1">Disabled Option</a>
+				<a class="disabled dropdown-item" href="javascript:;">Disabled Option</a>
 			</li>
 		</ul>
 	</div>
@@ -466,7 +452,7 @@ weight: 100
 			</a>
 		</li>
 		<li>
-			<a class="disabled dropdown-item" href="#1">Disabled Option</a>
+			<a class="disabled dropdown-item" href="javascript:;">Disabled Option</a>
 		</li>
 	</ul>
 </div>
@@ -500,7 +486,7 @@ weight: 100
 				</a>
 			</li>
 			<li>
-				<a class="disabled dropdown-item" href="#1">Disabled Option</a>
+				<a class="disabled dropdown-item" href="javascript:;">Disabled Option</a>
 			</li>
 		</ul>
 	</div>
@@ -563,7 +549,7 @@ weight: 100
 			</a>
 		</li>
 		<li>
-			<a class="disabled dropdown-item" href="#1">Disabled Option</a>
+			<a class="disabled dropdown-item" href="javascript:;">Disabled Option</a>
 		</li>
 	</ul>
 </div>
@@ -595,8 +581,8 @@ weight: 100
 		</form>
 		<form>
 			<div class="inline-scroller">
-				<div class="dropdown-subheader">Filter by</div>
 				<ul class="list-unstyled">
+					<li class="dropdown-subheader" role="presentation">Filter by</li>
 					<li class="active dropdown-item">
 						<div class="custom-control custom-checkbox">
 							<label>
@@ -617,19 +603,17 @@ weight: 100
 							</label>
 						</div>
 					</li>
-					<li class="disabled dropdown-item">
+					<li class="dropdown-item">
 						<div class="custom-control custom-checkbox">
 							<label>
-								<input disabled class="custom-control-input" type="checkbox">
+								<input disabled="disabled" class="custom-control-input" type="checkbox">
 								<span class="custom-control-label">
 									<span class="custom-control-label-text">Disabled Option</span>
 								</span>
 							</label>
 						</div>
 					</li>
-				</ul>
-				<div class="dropdown-subheader">Order by</div>
-				<ul class="list-unstyled">
+					<li class="dropdown-subheader" role="presentation">Order by</li>
 					<li class="active dropdown-item">
 						<div class="custom-control custom-radio">
 							<label>
@@ -650,10 +634,10 @@ weight: 100
 							</label>
 						</div>
 					</li>
-					<li class="disabled dropdown-item">
+					<li class="dropdown-item">
 						<div class="custom-control custom-radio">
 							<label>
-								<input disabled class="custom-control-input" id="dropdownRadio3" name="dropdownRadio" type="radio">
+								<input disabled="disabled" class="custom-control-input" id="dropdownRadio3" name="dropdownRadio" type="radio">
 								<span class="custom-control-label">
 									<span class="custom-control-label-text">Disabled Option</span>
 								</span>
@@ -813,8 +797,8 @@ weight: 100
 	</form>
 	<form>
 		<div class="inline-scroller">
-			<div class="dropdown-subheader">Filter by</div>
 			<ul class="list-unstyled">
+				<li class="dropdown-subheader" role="presentation">Filter by</li>
 				<li class="active dropdown-item">
 					<div class="custom-control custom-checkbox">
 						<label>
@@ -835,19 +819,17 @@ weight: 100
 						</label>
 					</div>
 				</li>
-				<li class="disabled dropdown-item">
+				<li class="dropdown-item">
 					<div class="custom-control custom-checkbox">
 						<label>
-							<input disabled class="custom-control-input" type="checkbox">
+							<input disabled="disabled" class="custom-control-input" type="checkbox">
 							<span class="custom-control-label">
 								<span class="custom-control-label-text">Disabled Option</span>
 							</span>
 						</label>
 					</div>
 				</li>
-			</ul>
-			<div class="dropdown-subheader">Order by</div>
-			<ul class="list-unstyled">
+				<li class="dropdown-subheader" role="presentation">Order by</li>
 				<li class="active dropdown-item">
 					<div class="custom-control custom-radio">
 						<label>
@@ -868,10 +850,10 @@ weight: 100
 						</label>
 					</div>
 				</li>
-				<li class="disabled dropdown-item">
+				<li class="dropdown-item">
 					<div class="custom-control custom-radio">
 						<label>
-							<input disabled class="custom-control-input" id="dropdownRadio3" name="dropdownRadio" type="radio">
+							<input disabled="disabled" class="custom-control-input" id="dropdownRadio3" name="dropdownRadio" type="radio">
 							<span class="custom-control-label">
 								<span class="custom-control-label-text">Disabled Option</span>
 							</span>
@@ -907,23 +889,15 @@ weight: 100
 		<ul class="list-unstyled">
 			<li><a class="dropdown-item" href="#1">Edit</a></li>
 			<li><a class="dropdown-item" href="#1">Preview</a></li>
-		</ul>
-		<div class="dropdown-divider"></div>
-		<ul class="list-unstyled">
+			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 			<li><a class="dropdown-item" href="#1">Expire</a></li>
 			<li><a class="dropdown-item" href="#1">View History</a></li>
-		</ul>
-		<div class="dropdown-divider"></div>
-		<ul class="list-unstyled">
+			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 			<li><a class="dropdown-item" href="#1">Permissions</a></li>
-		</ul>
-		<div class="dropdown-divider"></div>
-		<ul class="list-unstyled">
+			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 			<li><a class="dropdown-item" href="#1">Copy</a></li>
 			<li><a class="dropdown-item" href="#1">Move</a></li>
-		</ul>
-		<div class="dropdown-divider"></div>
-		<ul class="list-unstyled">
+			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 			<li><a class="dropdown-item" href="#1">Move to Recycle Bin</a></li>
 		</ul>
 	</div>
@@ -1076,23 +1050,15 @@ weight: 100
 		<ul class="list-unstyled">
 			<li><a class="dropdown-item" href="#1">Edit</a></li>
 			<li><a class="dropdown-item" href="#1">Preview</a></li>
-		</ul>
-		<div class="dropdown-divider"></div>
-		<ul class="list-unstyled">
+			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 			<li><a class="dropdown-item" href="#1">Expire</a></li>
 			<li><a class="dropdown-item" href="#1">View History</a></li>
-		</ul>
-		<div class="dropdown-divider"></div>
-		<ul class="list-unstyled">
+			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 			<li><a class="dropdown-item" href="#1">Permissions</a></li>
-		</ul>
-		<div class="dropdown-divider"></div>
-		<ul class="list-unstyled">
+			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 			<li><a class="dropdown-item" href="#1">Copy</a></li>
 			<li><a class="dropdown-item" href="#1">Move</a></li>
-		</ul>
-		<div class="dropdown-divider"></div>
-		<ul class="list-unstyled">
+			<li aria-hidden="true" class="dropdown-divider" role="presentation"></li>
 			<li><a class="dropdown-item" href="#1">Move to Recycle Bin</a></li>
 		</ul>
 	</div>

From 175921e4b576aef27eb6f9a6605cf3acd47154ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matuzale=CC=81m=20S=2E=20Teles?= <matuzalemteles@gmail.com>
Date: Wed, 21 Feb 2018 18:37:20 -0300
Subject: [PATCH 3/3] Update Subnav markup | Fixes #613

---
 .../src/pages/docs/components/subnav.md       | 76 ++++++++++++-------
 1 file changed, 47 insertions(+), 29 deletions(-)

diff --git a/packages/claycss.com/src/pages/docs/components/subnav.md b/packages/claycss.com/src/pages/docs/components/subnav.md
index 2ece8c8cfd..57772a6f5c 100644
--- a/packages/claycss.com/src/pages/docs/components/subnav.md
+++ b/packages/claycss.com/src/pages/docs/components/subnav.md
@@ -9,58 +9,76 @@ weight: 100
 
 ### Subnav
 
-<nav class="subnav subnav-light">
-	<div class="container">
-		<ul class="subnav-nav">
-			<li>
-				<span class="subnav-item">User Information</span>
+<nav class="tbar subnav-tbar subnav-tbar-light">
+	<div class="container-fluid container-fluid-max-xl">
+		<ul class="tbar-nav">
+			<li class="tbar-item tbar-item-expand">
+				<div class="tbar-section">
+					<span class="component-text text-truncate-inline">
+						<span class="text-truncate">User Information</span>
+					</span>
+				</div>
 			</li>
-		</ul>
-		<ul class="subnav-nav">
-			<li>
-				<span class="subnav-item">Step 1 of 2</span>
+			<li class="tbar-item">
+				<span class="component-text">Step 1 of 2</span>
 			</li>
 		</ul>
 	</div>
 </nav>
 
 ```text/html
-<nav class="subnav subnav-light">
-	<div class="container">
-		<ul class="subnav-nav">
-			<li>
-				<span class="subnav-item">User Information</span>
+<nav class="tbar subnav-tbar subnav-tbar-light">
+	<div class="container-fluid container-fluid-max-xl">
+		<ul class="tbar-nav">
+			<li class="tbar-item tbar-item-expand">
+				<div class="tbar-section">
+					<span class="component-text text-truncate-inline">
+						<span class="text-truncate">User Information</span>
+					</span>
+				</div>
 			</li>
-		</ul>
-		<ul class="subnav-nav">
-			<li>
-				<span class="subnav-item">Step 1 of 2</span>
+			<li class="tbar-item">
+				<span class="component-text">Step 1 of 2</span>
 			</li>
 		</ul>
 	</div>
 </nav>
 ```
 
-<nav class="subnav subnav-primary">
-	<div class="container">
-		<ul class="subnav-nav">
-			<li>
-				<span class="subnav-item subnav-title">Results for &quot;Master&quot; (<a class="subnav-link" href="#1">19 Items</a> and a <button class="btn btn-unstyled subnav-link" type="button">button</button>)</span>
+<nav class="tbar subnav-tbar subnav-tbar-primary">
+	<div class="container-fluid container-fluid-max-xl">
+		<ul class="tbar-nav">
+			<li class="tbar-item tbar-item-expand">
+				<div class="tbar-section">
+					<span class="component-title text-truncate-inline">
+						<span class="text-truncate">Results for "Master" (19 Items)</span>
+					</span>
+				</div>
+			</li>
+			<li class="tbar-item">
+				<button class="btn btn-unstyled component-link tbar-link" type="button">Clear</button>
 			</li>
 		</ul>
 	</div>
 </nav>
 
 ```text/html
-<nav class="subnav subnav-primary">
-	<div class="container">
-		<ul class="subnav-nav">
-			<li>
-				<span class="subnav-item subnav-title">Results for &quot;Master&quot; (<a class="subnav-link" href="#1">19 Items</a> and a <button class="btn btn-unstyled subnav-link" type="button">button</button>)</span>
+<nav class="tbar subnav-tbar subnav-tbar-primary">
+	<div class="container-fluid container-fluid-max-xl">
+		<ul class="tbar-nav">
+			<li class="tbar-item tbar-item-expand">
+				<div class="tbar-section">
+					<span class="component-title text-truncate-inline">
+						<span class="text-truncate">Results for "Master" (19 Items)</span>
+					</span>
+				</div>
+			</li>
+			<li class="tbar-item">
+				<button class="btn btn-unstyled component-link tbar-link" type="button">Clear</button>
 			</li>
 		</ul>
 	</div>
 </nav>
 ```
 
-</article>
\ No newline at end of file
+</article>