Initial commit: notification-elements-demo app

Interactive Angular 19 demo for @sda/notification-elements-ui with
6 sections: Bell & Feed, Notification Center, Inbox, Comments &
Threads, Mention Input, and Full-Featured layout. Includes mock
data, dark mode toggle, and real-time event log.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

node_modules/postcss-modules-scope/CHANGELOG.md

@@ -0,0 +1,92 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+This project adheres to [Semantic Versioning](http://semver.org/).
+
+## [3.2.1](https://github.com/postcss-modules-local-by-default/compare/v3.2.0...v3.2.1)
+
+### Chore
+
+- update `postcss-selector-parser`
+
+## [3.2.0](https://github.com/postcss-modules-local-by-default/compare/v3.1.2...v3.2.0) - 2024-04-03
+
+### Features
+
+- supports multiple composes, i.e. `.class { composes: a b, global(c), d e from "./path/file.css" }`
+
+## [3.1.2](https://github.com/postcss-modules-local-by-default/compare/v3.1.1...v3.1.2) - 2024-04-03
+
+### Fixes
+
+- export a root and limit from the `@scope` at-rule
+
+## [3.1.1](https://github.com/postcss-modules-local-by-default/compare/v3.1.0...v3.1.1) - 2024-01-18
+
+### Fixes
+
+- handle `@scope` at-rule
+- fix CSS nesting logic
+
+## [3.1.0](https://github.com/postcss-modules-local-by-default/compare/v3.0.0...v3.1.0) - 2023-12-21
+
+### Fixes
+
+- scoped class attribute
+
+### Features
+
+- pass a node to the `generateExportEntry` option
+
+## [3.0.0](https://github.com/postcss-modules-local-by-default/compare/v3.0.0-rc.2...v3.0.0) - 2020-10-13
+
+### Fixes
+
+- compatibility with plugins other plugins
+- handle animation short name
+- perf
+
+## [3.0.0-rc.2](https://github.com/postcss-modules-local-by-default/compare/v3.0.0-rc.1...v3.0.0-rc.2) - 2020-10-11
+
+### BREAKING CHANGE
+
+- minimum supported `postcss` version is `^8.1.0`
+
+### Fixes
+
+- minimum supported `Node.js` version is `^10 || ^12 || >= 14`
+- compatibility with PostCSS 8
+
+## [3.0.0-rc.1](https://github.com/postcss-modules-local-by-default/compare/v3.0.0-rc.0...v3.0.0-rc.1) - 2020-09-22
+
+### BREAKING CHANGE
+
+- do not handle invalid syntax
+
+## [3.0.0-rc.0](https://github.com/postcss-modules-local-by-default/compare/v2.2.0...v3.0.0-rc.0) - 2020-09-21
+
+### BREAKING CHANGE
+
+- minimum supported `Node.js` version is `>= 10.13.0 || >= 12.13.0 || >= 14`
+- minimum supported `postcss` version is `^8.0.3`
+- `postcss` was moved to `peerDependencies`, you need to install `postcss` in your project before use the plugin
+
+## 2.2.0 - 2020-03-19
+
+- added the `exportGlobals` option to export global classes and ids
+
+## 2.1.1 - 2019-03-05
+
+### Fixed
+
+- add additional space after the escape sequence (#17)
+
+## [2.1.0] - 2019-03-05
+
+### Fixed
+
+- handles properly selector with escaping characters (like: `.\31 a2b3c { color: red }`)
+
+### Feature
+
+- `generateExportEntry` option (allow to setup key and value for `:export {}` rule)

node_modules/postcss-modules-scope/LICENSE

@@ -0,0 +1,7 @@
+ISC License (ISC)
+
+Copyright (c) 2015, Glen Maddern
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

node_modules/postcss-modules-scope/README.md

@@ -0,0 +1,100 @@
+# CSS Modules: Scope Locals & Extend
+
+[![Build Status](https://travis-ci.org/css-modules/postcss-modules-scope.svg?branch=master)](https://travis-ci.org/css-modules/postcss-modules-scope)
+
+Transforms:
+
+```css
+:local(.continueButton) {
+  color: green;
+}
+```
+
+into:
+
+```css
+:export {
+  continueButton: __buttons_continueButton_djd347adcxz9;
+}
+.__buttons_continueButton_djd347adcxz9 {
+  color: green;
+}
+```
+
+so it doesn't pollute CSS global scope and can be simply used in JS like so:
+
+```js
+import styles from "./buttons.css";
+elem.innerHTML = `<button class="${styles.continueButton}">Continue</button>`;
+```
+
+## Composition
+
+Since we're exporting class names, there's no reason to export only one. This can give us some really useful reuse of styles:
+
+```css
+.globalButtonStyle {
+  background: white;
+  border: 1px solid;
+  border-radius: 0.25rem;
+}
+.globalButtonStyle:hover {
+  box-shadow: 0 0 4px -2px;
+}
+:local(.continueButton) {
+  compose-with: globalButtonStyle;
+  color: green;
+}
+```
+
+becomes:
+
+```
+.globalButtonStyle {
+  background: white;
+  border: 1px solid;
+  border-radius: 0.25rem;
+}
+.globalButtonStyle:hover {
+  box-shadow: 0 0 4px -2px;
+}
+:local(.continueButton) {
+  compose-with: globalButtonStyle;
+  color: green;
+}
+```
+
+**Note:** you can also use `composes` as a shorthand for `compose-with`
+
+## Local-by-default & reuse across files
+
+You're looking for [CSS Modules](https://github.com/css-modules/css-modules). It uses this plugin as well as a few others, and it's amazing.
+
+## Building
+
+```
+npm install
+npm test
+```
+
+- Status: [![Build Status](https://travis-ci.org/css-modules/postcss-modules-scope.svg?branch=master)](https://travis-ci.org/css-modules/postcss-modules-scope)
+- Lines: [![Coverage Status](https://coveralls.io/repos/css-modules/postcss-modules-scope/badge.svg?branch=master)](https://coveralls.io/r/css-modules/postcss-modules-scope?branch=master)
+- Statements: [![codecov.io](http://codecov.io/github/css-modules/postcss-modules-scope/coverage.svg?branch=master)](http://codecov.io/github/css-modules/postcss-modules-scope?branch=master)
+
+## Development
+
+- `npm test:watch` will watch `src` and `test` for changes and run the tests
+
+## License
+
+ISC
+
+## With thanks
+
+- Mark Dalgleish
+- Tobias Koppers
+- Guy Bedford
+
+---
+
+Glen Maddern, 2015.

node_modules/postcss-modules-scope/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "postcss-modules-scope",
+  "version": "3.2.1",
+  "description": "A CSS Modules transform to extract export statements from local-scope classes",
+  "main": "src/index.js",
+  "engines": {
+    "node": "^10 || ^12 || >= 14"
+  },
+  "scripts": {
+    "prettier": "prettier -l --ignore-path .gitignore . \"!test/test-cases\"",
+    "eslint": "eslint --ignore-path .gitignore .",
+    "lint": "yarn eslint && yarn prettier",
+    "test:only": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage --collectCoverageFrom=\"src/**/*\"",
+    "pretest": "yarn lint",
+    "test": "yarn test:coverage",
+    "prepublishOnly": "yarn test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/css-modules/postcss-modules-scope.git"
+  },
+  "keywords": [
+    "css-modules",
+    "postcss",
+    "plugin"
+  ],
+  "files": [
+    "src"
+  ],
+  "author": "Glen Maddern",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/css-modules/postcss-modules-scope/issues"
+  },
+  "homepage": "https://github.com/css-modules/postcss-modules-scope",
+  "dependencies": {
+    "postcss-selector-parser": "^7.0.0"
+  },
+  "devDependencies": {
+    "coveralls": "^3.1.0",
+    "eslint": "^7.9.0",
+    "eslint-config-prettier": "^6.12.0",
+    "husky": "^4.3.0",
+    "jest": "^26.4.2",
+    "lint-staged": "^10.4.0",
+    "postcss": "^8.3.0",
+    "prettier": "^2.1.2"
+  },
+  "peerDependencies": {
+    "postcss": "^8.1.0"
+  }
+}

node_modules/postcss-modules-scope/src/index.js

@@ -0,0 +1,376 @@
+"use strict";
+
+const selectorParser = require("postcss-selector-parser");
+
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+function isNestedRule(rule) {
+  if (!rule.parent || rule.parent.type === "root") {
+    return false;
+  }
+
+  if (rule.parent.type === "rule") {
+    return true;
+  }
+
+  return isNestedRule(rule.parent);
+}
+
+function getSingleLocalNamesForComposes(root, rule) {
+  if (isNestedRule(rule)) {
+    throw new Error(`composition is not allowed in nested rule \n\n${rule}`);
+  }
+
+  return root.nodes.map((node) => {
+    if (node.type !== "selector" || node.nodes.length !== 1) {
+      throw new Error(
+        `composition is only allowed when selector is single :local class name not in "${root}"`
+      );
+    }
+
+    node = node.nodes[0];
+
+    if (
+      node.type !== "pseudo" ||
+      node.value !== ":local" ||
+      node.nodes.length !== 1
+    ) {
+      throw new Error(
+        'composition is only allowed when selector is single :local class name not in "' +
+          root +
+          '", "' +
+          node +
+          '" is weird'
+      );
+    }
+
+    node = node.first;
+
+    if (node.type !== "selector" || node.length !== 1) {
+      throw new Error(
+        'composition is only allowed when selector is single :local class name not in "' +
+          root +
+          '", "' +
+          node +
+          '" is weird'
+      );
+    }
+
+    node = node.first;
+
+    if (node.type !== "class") {
+      // 'id' is not possible, because you can't compose ids
+      throw new Error(
+        'composition is only allowed when selector is single :local class name not in "' +
+          root +
+          '", "' +
+          node +
+          '" is weird'
+      );
+    }
+
+    return node.value;
+  });
+}
+
+const whitespace = "[\\x20\\t\\r\\n\\f]";
+const unescapeRegExp = new RegExp(
+  "\\\\([\\da-f]{1,6}" + whitespace + "?|(" + whitespace + ")|.)",
+  "ig"
+);
+
+function unescape(str) {
+  return str.replace(unescapeRegExp, (_, escaped, escapedWhitespace) => {
+    const high = "0x" + escaped - 0x10000;
+
+    // NaN means non-codepoint
+    // Workaround erroneous numeric interpretation of +"0x"
+    return high !== high || escapedWhitespace
+      ? escaped
+      : high < 0
+      ? // BMP codepoint
+        String.fromCharCode(high + 0x10000)
+      : // Supplemental Plane codepoint (surrogate pair)
+        String.fromCharCode((high >> 10) | 0xd800, (high & 0x3ff) | 0xdc00);
+  });
+}
+
+const plugin = (options = {}) => {
+  const generateScopedName =
+    (options && options.generateScopedName) || plugin.generateScopedName;
+  const generateExportEntry =
+    (options && options.generateExportEntry) || plugin.generateExportEntry;
+  const exportGlobals = options && options.exportGlobals;
+
+  return {
+    postcssPlugin: "postcss-modules-scope",
+    Once(root, { rule }) {
+      const exports = Object.create(null);
+
+      function exportScopedName(name, rawName, node) {
+        const scopedName = generateScopedName(
+          rawName ? rawName : name,
+          root.source.input.from,
+          root.source.input.css,
+          node
+        );
+        const exportEntry = generateExportEntry(
+          rawName ? rawName : name,
+          scopedName,
+          root.source.input.from,
+          root.source.input.css,
+          node
+        );
+        const { key, value } = exportEntry;
+
+        exports[key] = exports[key] || [];
+
+        if (exports[key].indexOf(value) < 0) {
+          exports[key].push(value);
+        }
+
+        return scopedName;
+      }
+
+      function localizeNode(node) {
+        switch (node.type) {
+          case "selector":
+            node.nodes = node.map((item) => localizeNode(item));
+            return node;
+          case "class":
+            return selectorParser.className({
+              value: exportScopedName(
+                node.value,
+                node.raws && node.raws.value ? node.raws.value : null,
+                node
+              ),
+            });
+          case "id": {
+            return selectorParser.id({
+              value: exportScopedName(
+                node.value,
+                node.raws && node.raws.value ? node.raws.value : null,
+                node
+              ),
+            });
+          }
+          case "attribute": {
+            if (node.attribute === "class" && node.operator === "=") {
+              return selectorParser.attribute({
+                attribute: node.attribute,
+                operator: node.operator,
+                quoteMark: "'",
+                value: exportScopedName(node.value, null, null),
+              });
+            }
+          }
+        }
+
+        throw new Error(
+          `${node.type} ("${node}") is not allowed in a :local block`
+        );
+      }
+
+      function traverseNode(node) {
+        switch (node.type) {
+          case "pseudo":
+            if (node.value === ":local") {
+              if (node.nodes.length !== 1) {
+                throw new Error('Unexpected comma (",") in :local block');
+              }
+
+              const selector = localizeNode(node.first);
+              // move the spaces that were around the pseudo selector to the first
+              // non-container node
+              selector.first.spaces = node.spaces;
+
+              const nextNode = node.next();
+
+              if (
+                nextNode &&
+                nextNode.type === "combinator" &&
+                nextNode.value === " " &&
+                /\\[A-F0-9]{1,6}$/.test(selector.last.value)
+              ) {
+                selector.last.spaces.after = " ";
+              }
+
+              node.replaceWith(selector);
+
+              return;
+            }
+          /* falls through */
+          case "root":
+          case "selector": {
+            node.each((item) => traverseNode(item));
+            break;
+          }
+          case "id":
+          case "class":
+            if (exportGlobals) {
+              exports[node.value] = [node.value];
+            }
+            break;
+        }
+        return node;
+      }
+
+      // Find any :import and remember imported names
+      const importedNames = {};
+
+      root.walkRules(/^:import\(.+\)$/, (rule) => {
+        rule.walkDecls((decl) => {
+          importedNames[decl.prop] = true;
+        });
+      });
+
+      // Find any :local selectors
+      root.walkRules((rule) => {
+        let parsedSelector = selectorParser().astSync(rule);
+
+        rule.selector = traverseNode(parsedSelector.clone()).toString();
+
+        rule.walkDecls(/^(composes|compose-with)$/i, (decl) => {
+          const localNames = getSingleLocalNamesForComposes(
+            parsedSelector,
+            decl.parent
+          );
+          const multiple = decl.value.split(",");
+
+          multiple.forEach((value) => {
+            const classes = value.trim().split(/\s+/);
+
+            classes.forEach((className) => {
+              const global = /^global\(([^)]+)\)$/.exec(className);
+
+              if (global) {
+                localNames.forEach((exportedName) => {
+                  exports[exportedName].push(global[1]);
+                });
+              } else if (hasOwnProperty.call(importedNames, className)) {
+                localNames.forEach((exportedName) => {
+                  exports[exportedName].push(className);
+                });
+              } else if (hasOwnProperty.call(exports, className)) {
+                localNames.forEach((exportedName) => {
+                  exports[className].forEach((item) => {
+                    exports[exportedName].push(item);
+                  });
+                });
+              } else {
+                throw decl.error(
+                  `referenced class name "${className}" in ${decl.prop} not found`
+                );
+              }
+            });
+          });
+
+          decl.remove();
+        });
+
+        // Find any :local values
+        rule.walkDecls((decl) => {
+          if (!/:local\s*\((.+?)\)/.test(decl.value)) {
+            return;
+          }
+
+          let tokens = decl.value.split(/(,|'[^']*'|"[^"]*")/);
+
+          tokens = tokens.map((token, idx) => {
+            if (idx === 0 || tokens[idx - 1] === ",") {
+              let result = token;
+
+              const localMatch = /:local\s*\((.+?)\)/.exec(token);
+
+              if (localMatch) {
+                const input = localMatch.input;
+                const matchPattern = localMatch[0];
+                const matchVal = localMatch[1];
+                const newVal = exportScopedName(matchVal);
+
+                result = input.replace(matchPattern, newVal);
+              } else {
+                return token;
+              }
+
+              return result;
+            } else {
+              return token;
+            }
+          });
+
+          decl.value = tokens.join("");
+        });
+      });
+
+      // Find any :local keyframes
+      root.walkAtRules(/keyframes$/i, (atRule) => {
+        const localMatch = /^\s*:local\s*\((.+?)\)\s*$/.exec(atRule.params);
+
+        if (!localMatch) {
+          return;
+        }
+
+        atRule.params = exportScopedName(localMatch[1]);
+      });
+
+      root.walkAtRules(/scope$/i, (atRule) => {
+        if (atRule.params) {
+          atRule.params = atRule.params
+            .split("to")
+            .map((item) => {
+              const selector = item.trim().slice(1, -1).trim();
+
+              const localMatch = /^\s*:local\s*\((.+?)\)\s*$/.exec(selector);
+
+              if (!localMatch) {
+                return `(${selector})`;
+              }
+
+              let parsedSelector = selectorParser().astSync(selector);
+
+              return `(${traverseNode(parsedSelector).toString()})`;
+            })
+            .join(" to ");
+        }
+      });
+
+      // If we found any :locals, insert an :export rule
+      const exportedNames = Object.keys(exports);
+
+      if (exportedNames.length > 0) {
+        const exportRule = rule({ selector: ":export" });
+
+        exportedNames.forEach((exportedName) =>
+          exportRule.append({
+            prop: exportedName,
+            value: exports[exportedName].join(" "),
+            raws: { before: "\n  " },
+          })
+        );
+
+        root.append(exportRule);
+      }
+    },
+  };
+};
+
+plugin.postcss = true;
+
+plugin.generateScopedName = function (name, path) {
+  const sanitisedPath = path
+    .replace(/\.[^./\\]+$/, "")
+    .replace(/[\W_]+/g, "_")
+    .replace(/^_|_$/g, "");
+
+  return `_${sanitisedPath}__${name}`.trim();
+};
+
+plugin.generateExportEntry = function (name, scopedName) {
+  return {
+    key: unescape(name),
+    value: unescape(scopedName),
+  };
+};
+
+module.exports = plugin;