@tacdaed/fragments 1.0.0-beta.0 → 1.0.0-beta.10

package/README.md

@@ -1,6 +1,7 @@
 # Fragments Library
 
-A reusable Angular library for UI fragments, code highlighting, and more.
+A reusable Angular library for UI fragments, code highlighting, and more. For usage, check here:
+[Usage-Fragments](https://usage-fragments.vercel.app/)
 
 ## Features
 
@@ -13,40 +14,43 @@ A reusable Angular library for UI fragments, code highlighting, and more.
 Install the library in your Angular project:
 
 ```sh
-npm install fragments
+npm install @tacdaed/fragments
 ```
 
 ## Setup
 
-### 1. Import Library Module
-
-Import the library module in your app module:
-
-```ts
-import { FragmentsModule } from 'fragments';
-
-@NgModule({
-  imports: [
-    FragmentsModule,
-    // ...other modules
-  ],
-})
-export class AppModule {}
-```
-
-### 2. Add Styles to `angular.json`
+### Add Styles to `angular.json`
 
 To enable syntax highlighting, you must import a Highlight.js theme in your app’s `angular.json`:
 
 ```json
 "styles": [
-  "node_modules/fragments/assets/styles/scss/highlight.js/github-dark.scss",
-  "node_modules/fragments/assets/styles/scss/style.scss",
-  "node_modules/fragments/assets/font-awesome/css/all.min.css",
+  "node_modules/highlight.js/styles/github-dark.css",
+  "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
+  "node_modules/@tacdaed/fragments/assets/styles/scss/style.scss",
   "src/styles.scss"
 ]
 ```
 
+### Fonts (Optional)
+
+The library does not include font files to keep the package lightweight.
+To use Roboto or Open Sans fonts in your app, you need to import them manually.
+
+You can use Google Fonts by adding the following to your index.html or a global SCSS file:
+
+```html
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;500;700;900&family=Open+Sans:ital,wght@0,400;1,400&display=swap">
+```
+Or install fonts via npm:
+```bash
+npm install @fontsource/roboto @fontsource/open-sans
+```
+Then import them in your `styles.scss`:
+```scss
+  @import "@fontsource/roboto/index.css";
+  @import "@fontsource/open-sans/index.css";
+```
 #### Choosing a Highlight.js Theme
 
 You can choose any theme from:

package/assets/styles/scss/_all.scss

@@ -1,5 +1,5 @@
-@use './fonts';
 @use './variables';
 @use './functions';
+@use './utilities';
 @use './directives/badge';
 @use './directives/tooltip';

package/assets/styles/scss/_utilities.scss

@@ -0,0 +1,12 @@
+.frg-visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  clip-path: inset(50%) !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+}