material-inspired-component-library 1.0.0 → 1.0.3

package/README.md

@@ -21,7 +21,7 @@ Explore the components in a live environment and see how they work.
 
 ### 1. Install via NPM
 ```shell
-npm install micl
+npm install material-inspired-component-library
 ```
 
 ### 2. Add the CSS
@@ -30,18 +30,18 @@ npm install micl
 
 To import the styles for a single component:
 ```SCSS
-@use "micl/components/card";
+@use "material-inspired-component-library/components/card";
 ```
 To import all component styles:
 ```SCSS
-@use "micl/styles";
+@use "material-inspired-component-library/styles";
 ```
 
 **Plain CSS**
 
 Add the main CSS file to your project:
 ```HTML
-<link rel="stylesheet" href="node_modules/micl/dist/micl.css">
+<link rel="stylesheet" href="node_modules/material-inspired-component-library/dist/micl.css">
 ```
 
 ### 3. Add the HTML & JavaScript
@@ -61,22 +61,22 @@ Some components, list the **List**, require a small amount of JavaScript to hand
 
 ```TypeScript
 // For components with interactive behaviour
-import list from "micl/components/lists";
+import list from "material-inspired-component-library/components/lists";
 
 // To import TypeScript for all components
-import components from "micl/components";
+import components from "material-inspired-component-library/components";
 ```
 
 To import all the TypeScript into your project:
 ```TypeScript
-import components from "micl/components";
+import components from "material-inspired-component-library/components";
 ```
 
 **Plain JavaScript**
 
 Add the main JavaScript file to your project:
 ```HTML
-<script src="node_modules/micl/dist/micl.js"></script>
+<script src="node_modules/material-inspired-component-library/dist/micl.js"></script>
 ```
 
 ## Available components ✅

package/components/accordion/README.md

@@ -31,7 +31,7 @@ The Accordion component is an extension of the [**List** component](../list/READ
 Import the list styles into your project:
 
 ```CSS
-@use "micl/components/list";
+@use "material-inspired-component-library/components/list";
 ```
 
 ### TypeScript
@@ -40,7 +40,7 @@ This component requires a TypeScript module to support keyboard navigation. You
 To manually initialize the component:
 
 ```TypeScript
-import miclAccordion from 'micl/components/list';
+import miclAccordion from 'material-inspired-component-library/components/list';
 
 miclAccordion.initialize(document.querySelector('.micl-list'));
 ```

package/components/bottomsheet/README.md

@@ -18,7 +18,7 @@ To create a standard bottom sheet, use the `<dialog>` element with the `popover`
 Import the bottom sheet styles into your project:
 
 ```CSS
-@use "micl/components/bottomsheet";
+@use "material-inspired-component-library/components/bottomsheet";
 ```
 
 ### TypeScript
@@ -27,7 +27,7 @@ This component requires a TypeScript module to support **modal** and **resizable
 To manually initialize the component:
 
 ```TypeScript
-import miclBottomSheet from 'micl/components/bottomsheet';
+import miclBottomSheet from 'material-inspired-component-library/components/bottomsheet';
 
 miclBottomSheet.initialize(document.querySelector('.micl-bottomsheet'));
 ```

package/components/button/README.md

@@ -14,7 +14,7 @@ To create a basic button, use the `<button>` element with a class that specifies
 Import the button styles into your project:
 
 ```CSS
-@use "micl/components/button";
+@use "material-inspired-component-library/components/button";
 ```
 
 ### TypeScript
@@ -23,7 +23,7 @@ This component requires a TypeScript module for interactive features like the **
 To manually initialize the component:
 
 ```TypeScript
-import miclButton from 'micl/components/button';
+import miclButton from 'material-inspired-component-library/components/button';
 
 miclButton.initialize(document.querySelector('.micl-button-text-s'));
 ```

package/components/card/README.md

@@ -16,7 +16,7 @@ To add a basic card, use a `<div>` element with one of the primary card style cl
 Import the card styles into your project:
 
 ```CSS
-@use "micl/components/card";
+@use "material-inspired-component-library/components/card";
 ```
 
 ### TypeScript

package/components/checkbox/README.md

@@ -15,7 +15,7 @@ To add a basic checkbox, use the `<input type="checkbox">` element with the `mic
 Import the checkbox styles into your project:
 
 ```CSS
-@use "micl/components/checkbox";
+@use "material-inspired-component-library/components/checkbox";
 ```
 
 ### TypeScript
@@ -24,7 +24,7 @@ This component requires a TypeScript module to support checking and unchecking u
 To manually initialize the component:
 
 ```TypeScript
-import miclCheckbox from 'micl/components/checkbox';
+import miclCheckbox from 'material-inspired-component-library/components/checkbox';
 
 miclCheckbox.initialize(document.querySelector('.micl-checkbox'));
 ```

package/components/dialog/README.md

@@ -25,7 +25,7 @@ To create a basic dialog, use the `<dialog>` element with the `micl-dialog` clas
 Import the dialog styles into your project:
 
 ```CSS
-@use "micl/components/dialog";
+@use "material-inspired-component-library/components/dialog";
 ```
 
 ### TypeScript

package/components/divider/README.md

@@ -14,7 +14,7 @@ To add a basic divider, use the `<hr>` element with the `micl-divider` class:
 Import the divider styles into your project:
 
 ```CSS
-@use "micl/components/divider";
+@use "material-inspired-component-library/components/divider";
 ```
 
 ### TypeScript

package/components/iconbutton/README.md

@@ -16,7 +16,7 @@ To create a basic icon button, use the `<button>` element with a class that spec
 Import the icon button styles into your project:
 
 ```CSS
-@use "micl/components/iconbutton";
+@use "material-inspired-component-library/components/iconbutton";
 ```
 
 ### TypeScript
@@ -25,7 +25,7 @@ This component requires a TypeScript module for interactive features like the **
 To manually initialize the component:
 
 ```TypeScript
-import miclIconButton from 'micl/components/button';
+import miclIconButton from 'material-inspired-component-library/components/button';
 
 miclIconButton.initialize(document.querySelector('.micl-iconbutton-standard-s'));
 ```

package/components/list/README.md

@@ -24,7 +24,7 @@ To create a basic list, use the `<ul>` element with the `micl-list` class and in
 Import the list styles into your project:
 
 ```CSS
-@use "micl/components/list";
+@use "material-inspired-component-library/components/list";
 ```
 
 ### TypeScript
@@ -33,7 +33,7 @@ This component requires a TypeScript module to support keyboard navigation. You
 To manually initialize the component:
 
 ```TypeScript
-import miclList from 'micl/components/list';
+import miclList from 'material-inspired-component-library/components/list';
 
 miclList.initialize(document.querySelector('.micl-list'));
 ```

package/components/menu/README.md

@@ -24,8 +24,8 @@ The Menu component is an extension of the [List component](../list/README.md). I
 Import the styles for both the menu and list components into your project:
 
 ```CSS
-@use "micl/components/list";
-@use "micl/components/menu";
+@use "material-inspired-component-library/components/list";
+@use "material-inspired-component-library/components/menu";
 ```
 
 ### TypeScript
@@ -34,7 +34,7 @@ This component requires the **Menu** TypeScript module for functionality. You ca
 To manually initialize the component:
 
 ```TypeScript
-import miclMenu from 'micl/components/menu';
+import miclMenu from 'material-inspired-component-library/components/menu';
 
 miclMenu.initialize(document.querySelector('.micl-menu'));
 ```

package/components/radio/README.md

@@ -15,7 +15,7 @@ To add a basic radio button, use the `<input type="radio">` element with the `mi
 Import the radio button styles into your project:
 
 ```CSS
-@use "micl/components/radio";
+@use "material-inspired-component-library/components/radio";
 ```
 
 ### TypeScript

package/components/select/README.md

@@ -24,9 +24,9 @@ The Select component is an extension of the [Text field](../textfield/README.md)
 The Select component relies on styles from the text field and list components. Be sure to import all three styles into your project.
 
 ```CSS
-@use "micl/components/list";
-@use "micl/components/textfield";
-@use "micl/components/select";
+@use "material-inspired-component-library/components/list";
+@use "material-inspired-component-library/components/textfield";
+@use "material-inspired-component-library/components/select";
 ```
 
 ### TypeScript
@@ -35,7 +35,7 @@ This component requires the **Text field** TypeScript module for functionality.
 To manually initialize the component:
 
 ```TypeScript
-import miclTextField from 'micl/components/textfield';
+import miclTextField from 'material-inspired-component-library/components/textfield';
 
 miclTextField.initialize(document.querySelector('.micl-textfield-filled'));
 ```

package/components/sidesheet/README.md

@@ -27,7 +27,7 @@ To create a standard side sheet, use the `<dialog>` element with the `popover` a
 Import the side sheet styles into your project:
 
 ```CSS
-@use "micl/components/sidesheet";
+@use "material-inspired-component-library/components/sidesheet";
 ```
 
 ### TypeScript

package/components/slider/README.md

@@ -14,7 +14,7 @@ To add a basic slider, use the `<input type="range">` element with one of the pr
 Import the slider styles into your project:
 
 ```CSS
-@use "micl/components/slider";
+@use "material-inspired-component-library/components/slider";
 ```
 
 ### TypeScript
@@ -23,7 +23,7 @@ This component requires the **Slider** TypeScript module for functionality. You
 To manually initialize the component:
 
 ```TypeScript
-import miclSlider from 'micl/components/slider';
+import miclSlider from 'material-inspired-component-library/components/slider';
 
 miclSlider.initialize(document.querySelector('.micl-slider-m'));
 ```

package/components/switch/README.md

@@ -15,7 +15,7 @@ To add a basic switch, use the `<input type="checkbox">` element with the `micl-
 Import the switch styles into your project:
 
 ```CSS
-@use "micl/components/switch";
+@use "material-inspired-component-library/components/switch";
 ```
 
 ### TypeScript

package/components/textfield/README.md

@@ -17,7 +17,7 @@ A basic text field can be either `filled` or `outlined`. To create one, use the
 Import the text field styles into your project:
 
 ```CSS
-@use "micl/components/textfield";
+@use "material-inspired-component-library/components/textfield";
 ```
 
 ### TypeScript
@@ -26,7 +26,7 @@ This component requires a TypeScript module for interactive features like the **
 To manually initialize the component and attach an event listener for the `input` event:
 
 ```TypeScript
-import miclTextField from 'micl/components/textfield';
+import miclTextField from 'material-inspired-component-library/components/textfield';
 
 miclTextField.initialize(document.querySelector('.micl-textfield-filled'));
 

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "material-inspired-component-library",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.",
   "author": "MICL Hermana <micl.hermana@proton.me> (https://github.com/henkpb/micl)",
-  "license": "ISC",
+  "license": "MIT",
   "keywords": [
     "Material Design",
     "component library",
@@ -33,7 +33,7 @@
   },
   "homepage": "https://github.com/henkpb/micl",
   "bugs": {
-    "url": "https://github.com/henkpb/micl/issues"
+    "url": "https://github.com/henkpb/material-inspired-component-library/issues"
   },
   "main": "index.js",
   "scripts": {
@@ -55,8 +55,5 @@
     "typescript": "^5.8.3",
     "webpack": "^5.99",
     "webpack-cli": "^6.0"
-  },
-  "dependencies": {
-    "material-inspired-component-library": "file:"
   }
 }

package/styles/README.md

@@ -8,7 +8,7 @@ Elevation represents the distance between surfaces on the z-axis, creating a sen
 Import the elevation styles into your project:
 
 ```CSS
-@use "micl/styles/elevation";
+@use "material-inspired-component-library/styles/elevation";
 ```
 
 ### Customizations
@@ -31,7 +31,7 @@ Motion brings your UI to life, making it expressive and intuitive to use. The mo
 Import the motion styles into your project:
 
 ```CSS
-@use "micl/styles/motion";
+@use "material-inspired-component-library/styles/motion";
 ```
 
 
@@ -42,7 +42,7 @@ Shapes add decorative flair and help emphasize elements. These styles adhere to
 Import the shape styles into your project:
 
 ```CSS
-@use "micl/styles/shapes";
+@use "material-inspired-component-library/styles/shapes";
 ```
 
 ### Customizations
@@ -65,7 +65,7 @@ State layers are visual overlays that communicate the interaction status of a co
 Import the state layer styles into your project:
 
 ```CSS
-@use "micl/styles/statelayer";
+@use "material-inspired-component-library/styles/statelayer";
 ```
 
 ### Customizations
@@ -86,7 +86,7 @@ Typography is the foundation of text styling. The typography styles in this libr
 Import the typography styles into your project:
 
 ```CSS
-@use "micl/styles/typography";
+@use "material-inspired-component-library/styles/typography";
 ```
 
 ### Customizations

package/styles.scss

@@ -26,18 +26,18 @@
 @use 'styles/ripple';
 @use 'styles/statelayer';
 
-@use 'components/divider/divider';
-@use 'components/radio/radio';
-@use 'components/checkbox/checkbox';
-@use 'components/switch/switch';
-@use 'components/textfield/textfield';
-@use 'components/slider/slider';
-@use 'components/button/button';
-@use 'components/iconbutton/iconbutton';
-@use 'components/list/list';
-@use 'components/menu/menu';
-@use 'components/select/select';
-@use 'components/card/card';
-@use 'components/dialog/dialog';
-@use 'components/sidesheet/sidesheet';
-@use 'components/bottomsheet/bottomsheet';
+@use 'components/divider';
+@use 'components/radio';
+@use 'components/checkbox';
+@use 'components/switch';
+@use 'components/textfield';
+@use 'components/slider';
+@use 'components/button';
+@use 'components/iconbutton';
+@use 'components/list';
+@use 'components/menu';
+@use 'components/select';
+@use 'components/card';
+@use 'components/dialog';
+@use 'components/sidesheet';
+@use 'components/bottomsheet';

package/themes/README.md

@@ -48,7 +48,7 @@ The MICL package includes several example color schemes that you can use as a st
 To use the "Olive Green" light theme, for instance, simply import it into your main stylesheet:
 
 ```CSS
-@use "micl/themes/olivegreen/light.css";
+@use "material-inspired-component-library/themes/olivegreen/light.css";
 ```
 
 You can then apply this theme to your <body> or another root element in your application.

package/webpack.config.js

@@ -6,7 +6,7 @@ const distDir = path.resolve(__dirname, 'dist');
 
 const scssFiles = glob.sync('./components/**/*.scss');
 const scssEntries = scssFiles.reduce((entries, filePath) => {
-    const componentName = path.basename(filePath, '.scss');
+    const componentName = path.dirname(filePath).split('\\').pop();
     entries[componentName] = './' + filePath;
     return entries;
 }, {});