@internetarchive/elements 0.2.8-webdev-8565.2 → 0.2.10
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.
- package/dist/src/elements/ia-sr-only-text/ia-sr-only-text.d.ts +10 -0
- package/dist/src/elements/ia-sr-only-text/ia-sr-only-text.d.ts.map +1 -0
- package/dist/src/elements/ia-sr-only-text/ia-sr-only-text.js +43 -0
- package/dist/src/elements/ia-sr-only-text/ia-sr-only-text.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* Wraps any slotted elements in a `span` element that hides them visually but keeps them available for screen readers.
|
|
4
|
+
* Useful for rendering any additional explanatory text that is only necessary for screen readers.
|
|
5
|
+
*/
|
|
6
|
+
export declare class IASrOnlyText extends LitElement {
|
|
7
|
+
render(): TemplateResult;
|
|
8
|
+
static get styles(): CSSResultGroup;
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=ia-sr-only-text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ia-sr-only-text.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-sr-only-text/ia-sr-only-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5E;;;GAGG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,IAAI,cAAc;IAQxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAoBlC;CACF"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { css, html, LitElement } from 'lit';
|
|
3
|
+
import { customElement } from 'lit/decorators.js';
|
|
4
|
+
import themeStyles from '../../themes/theme-styles.js';
|
|
5
|
+
/**
|
|
6
|
+
* Wraps any slotted elements in a `span` element that hides them visually but keeps them available for screen readers.
|
|
7
|
+
* Useful for rendering any additional explanatory text that is only necessary for screen readers.
|
|
8
|
+
*/
|
|
9
|
+
let IASrOnlyText = class IASrOnlyText extends LitElement {
|
|
10
|
+
render() {
|
|
11
|
+
return html `
|
|
12
|
+
<span class="sr-only">
|
|
13
|
+
<slot></slot>
|
|
14
|
+
</span>
|
|
15
|
+
`;
|
|
16
|
+
}
|
|
17
|
+
static get styles() {
|
|
18
|
+
return [
|
|
19
|
+
themeStyles,
|
|
20
|
+
css `
|
|
21
|
+
.sr-only {
|
|
22
|
+
position: absolute !important;
|
|
23
|
+
width: 1px !important;
|
|
24
|
+
height: 1px !important;
|
|
25
|
+
margin: -1px !important;
|
|
26
|
+
padding: 0 !important;
|
|
27
|
+
border: 0 !important;
|
|
28
|
+
overflow: hidden !important;
|
|
29
|
+
white-space: nowrap !important;
|
|
30
|
+
clip: rect(1px, 1px, 1px, 1px) !important;
|
|
31
|
+
-webkit-clip-path: inset(50%) !important;
|
|
32
|
+
clip-path: inset(50%) !important;
|
|
33
|
+
user-select: none !important;
|
|
34
|
+
}
|
|
35
|
+
`,
|
|
36
|
+
];
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
IASrOnlyText = __decorate([
|
|
40
|
+
customElement('ia-sr-only-text')
|
|
41
|
+
], IASrOnlyText);
|
|
42
|
+
export { IASrOnlyText };
|
|
43
|
+
//# sourceMappingURL=ia-sr-only-text.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ia-sr-only-text.js","sourceRoot":"","sources":["../../../../src/elements/ia-sr-only-text/ia-sr-only-text.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;GAGG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAC1C,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;OAeF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA9BY,YAAY;IADxB,aAAa,CAAC,iBAAiB,CAAC;GACpB,YAAY,CA8BxB","sourcesContent":["import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * Wraps any slotted elements in a `span` element that hides them visually but keeps them available for screen readers.\n * Useful for rendering any additional explanatory text that is only necessary for screen readers.\n */\n@customElement('ia-sr-only-text')\nexport class IASrOnlyText extends LitElement {\n render(): TemplateResult {\n return html`\n <span class=\"sr-only\">\n <slot></slot>\n </span>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n .sr-only {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n margin: -1px !important;\n padding: 0 !important;\n border: 0 !important;\n overflow: hidden !important;\n white-space: nowrap !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n user-select: none !important;\n }\n `,\n ];\n }\n}\n"]}
|
package/package.json
CHANGED