First commit.

sass/components/visually-hidden/_visually-hidden.scss

@@ -0,0 +1,41 @@
+// Visually hidden
+//
+// Make an element visually hidden, but accessible to screen readers, etc.
+//
+// .visually-hidden--off        - Turns off the visually-hidden effect.
+// .visually-hidden--focusable  - Makes an element visually hidden by default,
+//                                but visible when receiving focus.
+// .visually-hidden--focusable:focus  - A focused, and visible, element.
+//
+// Markup: visually-hidden.twig
+//
+// Style guide: components.visually-hidden
+
+.visually-hidden,
+%visually-hidden {
+  @include visually-hidden();
+
+  &--off {
+    @include visually-hidden--off();
+  }
+
+  &--focusable {
+    &:active,
+    &:focus {
+      @extend %visually-hidden--off;
+    }
+  }
+}
+
+//
+// Drupal selectors.
+//
+
+.element-invisible {
+  @extend %visually-hidden;
+}
+
+.element-focusable {
+  @extend %visually-hidden;
+  @extend %visually-hidden--focusable;
+}

sass/components/visually-hidden/visually-hidden.json

@@ -0,0 +1,3 @@
+{
+  "content": "This text will be read by screen readers, but will be visually hidden."
+}

sass/components/visually-hidden/visually-hidden.twig

@@ -0,0 +1,3 @@
+<div class="visually-hidden {{modifier_class}}">
+  {{content}}
+</div>