@umbraco-ui/uui-visually-hidden 1.5.0-rc.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 uui-app
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# uui-visually-hidden
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-visually-hidden?logoColor=%231B264F)
+
+Umbraco style visually-hidden component.
+
+The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
+
+According to [The A11Y Project](https://www.a11yproject.com/posts/how-to-hide-content/):
+
+> There are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead.
+
+Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus. This behavior is intentional, as sighted keyboard user won’t be able to determine where the focus indicator is without it.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-visually-hidden
+```
+
+Import the registration of `<uui-visually-hidden>` via:
+
+```javascript
+import '@umbraco-ui/uui-visually-hidden';
+```
+
+When looking to leverage the `UUIVisuallyHiddenElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIVisuallyHiddenElement } from '@umbraco-ui/uui-visually-hidden';
+```
+
+## Usage
+
+```html
+<uui-visually-hidden></uui-visually-hidden>
+```

package/custom-elements.json

@@ -0,0 +1,16 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "uui-visually-hidden",
+      "path": "./lib/uui-visually-hidden.element.ts",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        }
+      ]
+    }
+  ]
+}

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './uui-visually-hidden.element';

package/lib/index.js

@@ -0,0 +1,39 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { css, LitElement, html } from 'lit';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let UUIVisuallyHiddenElement = class extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+UUIVisuallyHiddenElement.styles = [
+  css`
+      :host(:not(:focus-within)) {
+        position: absolute !important;
+        width: 1px !important;
+        height: 1px !important;
+        clip: rect(0 0 0 0) !important;
+        clip-path: inset(50%) !important;
+        border: none !important;
+        overflow: hidden !important;
+        white-space: nowrap !important;
+        padding: 0 !important;
+      }
+    `
+];
+UUIVisuallyHiddenElement = __decorateClass([
+  defineElement("uui-visually-hidden")
+], UUIVisuallyHiddenElement);
+
+export { UUIVisuallyHiddenElement };

package/lib/uui-visually-hidden.element.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+/**
+ * @element uui-visually-hidden
+ */
+export declare class UUIVisuallyHiddenElement extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-visually-hidden': UUIVisuallyHiddenElement;
+    }
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@umbraco-ui/uui-visually-hidden",
+  "version": "1.5.0-rc.1",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Visually Hidden"
+  ],
+  "description": "Umbraco UI visually-hidden component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-visually-hidden"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
+  "customElements": "custom-elements.json",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "1.5.0-rc.1"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts custom-elements.json",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-visually-hidden",
+  "gitHead": "2ff35a098ed8a3feb8ebed1bf43b4fbb75950d65"
+}