@blockquote-web-components/blockquote-directive-ariaidref-slot 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 blockquote-directive-ariaidref-slot
+
+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,81 @@
+# blockquoteDirectiveAriaidrefSlot
+
+![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
+
+This directive creates a slot element, hidden by default, with a specific name and id.
+The name and id of this slot should correspond to the 'slot' attribute of an element in the Light DOM.
+It connects the 'slot', 'name', and 'id' attributes of a slot to be used with ARIA relationships.
+
+This slot element is used to overcome some limitations of the Shadow DOM.
+
+> [aria attribute reflection](https://web.dev/articles/aria-labels-and-relationships#relationships)
+
+### Demo
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/oscarmarina/blockquote-web-components/tree/main/packages/directives/blockquote-directive-ariaidref-slot)
+
+### Usage
+
+__Light Dom__:
+
+```html
+<wrapper-dialog>
+  <span slot="idref_">Registration - All fields are required</span>
+</wrapper-dialog>
+```
+
+__Shadow Dom__:
+
+```js
+class MyDialog extends LitElement {
+  constructor() {
+    super();
+    this.labelledby = 'idref_';
+  }
+
+  get _labeledbyTpl() {
+    return html`${this.labelledby ? blockquoteDirectiveAriaidrefSlot(this.labelledby) : ''}`;
+  }
+
+  render() {
+    return html`
+      <dialog aria-labelledby="${this.labelledby || nothing}"><slot></slot></dialog>
+      // slot is hidden by default
+      ${this._labeledbyTpl} // <slot name="idref_" id="idref_" hidden=""></slot>
+
+      // slot not hidden
+      ${this._labeledbyTpl, false} // <slot name="idref_" id="idref_"></slot>
+    `;
+  }
+}
+```
+
+
+### `src/BlockquoteDirectiveAriaidrefSlot.js`:
+
+#### class: `README`
+
+<hr/>
+
+#### Variables
+
+| Name                               | Description | Type |
+| ---------------------------------- | ----------- | ---- |
+| `blockquoteDirectiveAriaidrefSlot` |             |      |
+
+<hr/>
+
+#### Exports
+
+| Kind | Name                               | Declaration                      | Module                                  | Package |
+| ---- | ---------------------------------- | -------------------------------- | --------------------------------------- | ------- |
+| `js` | `README`                           | README                           | src/BlockquoteDirectiveAriaidrefSlot.js |         |
+| `js` | `blockquoteDirectiveAriaidrefSlot` | blockquoteDirectiveAriaidrefSlot | src/BlockquoteDirectiveAriaidrefSlot.js |         |
+
+### `src/index.js`:
+
+#### Exports
+
+| Kind | Name                               | Declaration                      | Module                                | Package |
+| ---- | ---------------------------------- | -------------------------------- | ------------------------------------- | ------- |
+| `js` | `blockquoteDirectiveAriaidrefSlot` | blockquoteDirectiveAriaidrefSlot | ./BlockquoteDirectiveAriaidrefSlot.js |         |

package/package.json

@@ -0,0 +1,160 @@
+{
+  "name": "@blockquote-web-components/blockquote-directive-ariaidref-slot",
+  "version": "1.0.0",
+  "description": "This directive creates a slot element, hidden by default, with a specific name and id",
+  "keywords": [
+    "lit",
+    "web-component",
+    "lit-element",
+    "aria",
+    "slot",
+    "aria-labels",
+    "relationships"
+  ],
+  "license": "MIT",
+  "author": "blockquote-directive-ariaidref-slot",
+  "type": "module",
+  "exports": {
+    ".": {
+      "default": "./src/index.js"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    "./src/BlockquoteDirectiveAriaidrefSlot.js": {
+      "default": "./src/BlockquoteDirectiveAriaidrefSlot.js"
+    },
+    "./index.js": {
+      "default": "./src/index.js"
+    }
+  },
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "files": [
+    "/define/",
+    "/src/",
+    "index.js",
+    "!/**/*.scss"
+  ],
+  "scripts": {
+    "analyze": "cem analyze --litelement --globs \"{src,define}/**/*.{js,ts}\" \"index.js\"",
+    "build": "echo \"This is not a TypeScript project, so no need to build.\"",
+    "dev:vite": "vite build",
+    "format": "npm run format:eslint && npm run format:prettier && npm run format:stylelint",
+    "format:eslint": "eslint \"**/*.{js,ts,html}\" --fix --ignore-path .eslintignore",
+    "format:prettier": "prettier \"**/*.{js,ts,json,html}\" --write --ignore-path .eslintignore",
+    "format:stylelint": "stylelint \"**/*.{scss,css}\" --fix --allow-empty-input --ignore-path .eslintignore",
+    "postinstall": "npm run sort:package",
+    "lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:stylelint",
+    "lint:eslint": "eslint \"**/*.{js,ts,html}\" --ignore-path .eslintignore",
+    "lint:prettier": "prettier \"**/*.{js,ts,json,html}\" --check --ignore-path .eslintignore",
+    "lint:stylelint": "stylelint \"**/*.{scss,css}\" --allow-empty-input --ignore-path .eslintignore",
+    "prepare": "husky",
+    "preview:vite": "vite preview",
+    "sass:watch": "sass-style-template",
+    "sort:package": "npx sort-package-json",
+    "start": "concurrently -k -r \"npm:sass:watch\" \"npm:vite\"",
+    "test": "wtr",
+    "test:watch": "wtr --watch",
+    "vite": "vite"
+  },
+  "lint-staged": {
+    "**/*.{js,ts,html}": [
+      "npm run format:eslint"
+    ],
+    "**/*.{js,ts,json,html}": [
+      "npm run format:prettier"
+    ],
+    "**/*.{scss,css}": [
+      "npm run format:stylelint"
+    ]
+  },
+  "prettier": {
+    "arrowParens": "avoid",
+    "printWidth": 100,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "overrides": [
+      {
+        "files": "*.{scss,css}",
+        "options": {
+          "printWidth": 280,
+          "singleQuote": false
+        }
+      }
+    ]
+  },
+  "eslintConfig": {
+    "parserOptions": {
+      "ecmaVersion": "latest"
+    },
+    "extends": [
+      "@open-wc",
+      "prettier"
+    ],
+    "rules": {
+      "class-methods-use-this": "off",
+      "indent": [
+        "error",
+        2,
+        {
+          "SwitchCase": 1,
+          "ignoredNodes": [
+            "PropertyDefinition",
+            "TemplateLiteral > CallExpression"
+          ]
+        }
+      ],
+      "no-unused-expressions": [
+        "error",
+        {
+          "allowShortCircuit": true,
+          "allowTernary": true
+        }
+      ],
+      "object-curly-newline": "off",
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ],
+      "import/no-extraneous-dependencies": [
+        "error",
+        {
+          "devDependencies": [
+            "**/test/**/*.{js,ts}",
+            "**/*.config.{js,ts,mjs,cjs}",
+            "**/*.conf.{js,ts,mjs,cjs}"
+          ]
+        }
+      ],
+      "import/no-unresolved": "off",
+      "import/prefer-default-export": "off",
+      "lit-a11y/click-events-have-key-events": "off",
+      "lit/no-classfield-shadowing": "off",
+      "lit/no-native-attributes": "off"
+    }
+  },
+  "stylelint": {
+    "extends": "stylelint-config-standard-scss",
+    "rules": {
+      "custom-property-pattern": null,
+      "no-duplicate-selectors": null,
+      "color-function-notation": null,
+      "alpha-value-notation": null
+    }
+  },
+  "dependencies": {
+    "lit": "^3.1.1"
+  },
+  "devDependencies": {
+    "@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.9.0",
+    "@blockquote-web-components/blockquote-base-embedded-webview": "^1.10.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "customElements": "custom-elements.json"
+}

package/src/BlockquoteDirectiveAriaidrefSlot.js

@@ -0,0 +1,90 @@
+// eslint-disable-next-line max-classes-per-file
+import { Directive, directive, PartType } from 'lit/directive.js';
+import { noChange } from 'lit';
+
+/**
+ * # blockquoteDirectiveAriaidrefSlot
+ *
+ * ![Lit](https://img.shields.io/badge/lit-3.0.0-blue.svg)
+ *
+ * This directive creates a slot element, hidden by default, with a specific name and id.
+ * The name and id of this slot should correspond to the 'slot' attribute of an element in the Light DOM.
+ * It connects the 'slot', 'name', and 'id' attributes of a slot to be used with ARIA relationships.
+ *
+ * This slot element is used to overcome some limitations of the Shadow DOM.
+ *
+ * > [aria attribute reflection](https://web.dev/articles/aria-labels-and-relationships#relationships)
+ *
+ * ### Demo
+ *
+ * [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/oscarmarina/blockquote-web-components/tree/main/packages/directives/blockquote-directive-ariaidref-slot)
+ *
+ * ### Usage
+ *
+ * __Light Dom__:
+ *
+ * ```html
+ * <wrapper-dialog>
+ *   <span slot="idref_">Registration - All fields are required</span>
+ * </wrapper-dialog>
+ * ```
+ *
+ * __Shadow Dom__:
+ *
+ * ```js
+ * class MyDialog extends LitElement {
+ *   constructor() {
+ *     super();
+ *     this.labelledby = 'idref_';
+ *   }
+ *
+ *   get _labeledbyTpl() {
+ *     return html`${this.labelledby ? blockquoteDirectiveAriaidrefSlot(this.labelledby) : ''}`;
+ *   }
+ *
+ *   render() {
+ *     return html`
+ *       <dialog aria-labelledby="${this.labelledby || nothing}"><slot></slot></dialog>
+ *       // slot is hidden by default
+ *       ${this._labeledbyTpl} // <slot name="idref_" id="idref_" hidden=""></slot>
+ *
+ *       // slot not hidden
+ *       ${this._labeledbyTpl, false} // <slot name="idref_" id="idref_"></slot>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export class README extends Text {}
+
+class BlockquoteDirectiveAriaidrefSlot extends Directive {
+  /**
+   * @param {*} partInfo - The part information.
+   */
+  constructor(partInfo) {
+    super(partInfo);
+    if (partInfo.type !== PartType.CHILD) {
+      throw new Error('blockquoteDirectiveAriaidrefSlot can only be used in child expressions');
+    }
+    this.hasSlotNode = false;
+  }
+
+  /**
+   * Creates an accessible slot element.
+   *
+   * @param {string} value - The name and id of the slot.
+   * @param {boolean} [isVisible=true] - A flag indicating whether the slot is visible (defaults to true).
+   * @returns {HTMLSlotElement | import('lit').noChange} - The created slot element, or noChange if the slot was not created.
+   */
+  render(value, isVisible = false) {
+    if (!value || typeof value !== 'string' || this.hasSlotNode) {
+      return noChange;
+    }
+    const slot = document.createElement('slot');
+    Object.assign(slot, { name: value, id: value, hidden: !isVisible });
+    this.hasSlotNode = true;
+    return slot;
+  }
+}
+
+export const blockquoteDirectiveAriaidrefSlot = directive(BlockquoteDirectiveAriaidrefSlot);

package/src/index.js

@@ -0,0 +1 @@
+export { blockquoteDirectiveAriaidrefSlot } from './BlockquoteDirectiveAriaidrefSlot.js';