@natachah/vanilla-frontend 0.1.21 → 0.1.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/docs/pages/base/typography.html +19 -0
  2. package/docs/src/js/doc-layout.js +1 -1
  3. package/natachah-vanilla-frontend-0.1.22.tgz +0 -0
  4. package/package.json +1 -1
  5. package/scss/base/_typography.scss +12 -0
  6. package/scss/themes/_root.scss +1 -0
  7. package/natachah-vanilla-frontend-0.1.21.tgz +0 -0
package/docs/pages/base/typography.html CHANGED
@@ -104,6 +104,25 @@
104
104
  </doc-code>
105
105
  </div>
106
106
 
107
+ <p>By default the external link with <code>target="_blank"</code> attribute, will have an icon for accessibility.</p>
108
+
109
+ <doc-demo>
110
+ <a href="#" target="_blank" title="This link opens in a new window" aria-label="This link opens in a new window">Anchor</a>
111
+ </doc-demo>
112
+
113
+ <div class="code-group">
114
+ <div role="tablist">
115
+ <button role="tab" aria-controls="html">HTML</button>
116
+ <button role="tab" aria-controls="css">CSS</button>
117
+ </div>
118
+ <doc-code id="html" data-type="html" role="tabpanel">
119
+ <a href="#" target="_blank" title="This link opens in a new window" aria-label="This link opens in a new window">Anchor</a>
120
+ </doc-code>
121
+ <doc-code id="css" data-type="css" role="tabpanel">
122
+ --icon-external
123
+ </doc-code>
124
+ </div>
125
+
107
126
  <h2>Inline</h2>
108
127
 
109
128
  <doc-demo>
package/docs/src/js/doc-layout.js CHANGED
@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
18
18
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
19
19
  <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
20
20
  </svg>
21
- 0.1.21
21
+ 0.1.22
22
22
  </span>
23
23
  </li>
24
24
  <li>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@natachah/vanilla-frontend",
3
- "version": "0.1.21",
3
+ "version": "0.1.22",
4
4
  "description": "A vanilla frontend framework",
5
5
  "keywords": [
6
6
  "html5",
package/scss/base/_typography.scss CHANGED
@@ -49,6 +49,18 @@ button[role=link] {
49
49
  opacity: var(--anchor-disabled-opacity, var(--disabled-opacity));
50
50
  }
51
51
 
52
+ &[target=_blank]::after {
53
+ content: "";
54
+ display: inline-block;
55
+ width: .825em;
56
+ height: .825em;
57
+ vertical-align: baseline;
58
+ margin-inline-start: 0.25em;
59
+ background-color: currentColor;
60
+ mask-image: var(--icon-external);
61
+ mask-size: cover;
62
+ }
63
+
52
64
  }
53
65
 
54
66
  small {
package/scss/themes/_root.scss CHANGED
@@ -67,6 +67,7 @@
67
67
  --color-warning-contrast: black;
68
68
 
69
69
  // Icons
70
+ --icon-external: url('data: image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5" /><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z" /></svg>');
70
71
  --icon-date: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>');
71
72
  --icon-time: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/></svg>');
72
73
  --icon-file: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/></svg>');