@trenoxxious/n-components 1.0.12 → 1.0.14

package/dist/index.css

@@ -103,6 +103,8 @@ b {
 }
 
 .socials-dash {
+    opacity: 1;
+    transition: opacity 1s ease-in-out;
     position: fixed;
     display: flex;
     align-items: center;
@@ -113,6 +115,10 @@ b {
     z-index: 10;
 }
 
+.hide {
+    opacity: 0;
+}
+
 .sec {
     margin-top: 15px;
     margin-bottom: 15px;
@@ -221,8 +227,15 @@ b {
 }
 
 pre {
+    padding: 0.5rem !important;
+    text-wrap: nowrap;
     text-align: left;
     margin-left: 25px;
+    overflow-x: auto;
+}
+
+code {
+    text-wrap: nowrap;
 }
 
 .code span {
@@ -407,6 +420,10 @@ pre {
         margin: 0 2%;
     }
 
+    .components-grid-full {
+        margin: 0 2%;
+    }
+
     header h1 {
         font-size: 3.0rem;
         -webkit-text-stroke-width: 1px;
@@ -421,4 +438,8 @@ pre {
     .component-header h3 {
         text-align: center;
     }
+
+    .button-grid-4 {
+        grid-template-columns: repeat(1, 1fr);
+    }
 }

package/dist/index.html

@@ -195,15 +195,22 @@
         </div>
     </div>
     <script>
-        const copyImportButton = document.getElementById('copy-import');
         const currentVersionDisplay = document.getElementById('current-version');
         const currentVersionNum = '1.0.12';
 
-        copyImportButton.addEventListener('click', () => {
-            navigator.clipboard.writeText(`\<script src=\"https://unpkg.com/@trenoxxious/n-components@latest/dist/n-components.umd.js\">\<\/script\>`);
-        });
-
         currentVersionDisplay.innerText = currentVersionNum;
+
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 10) {
+                if (document.querySelector('.socials-dash')) {
+                    document.querySelector('.socials-dash').classList.add('hide');
+                }
+            } else {
+                if (document.querySelector('.socials-dash')) {
+                    document.querySelector('.socials-dash').classList.remove('hide');
+                }
+            }
+        });
     </script>
 </body>
 

package/dist/n-components.es.js

@@ -720,13 +720,14 @@ var NButton = class extends i {
 NButton = __decorate([t("n-button")], NButton);
 var NCopy = class extends i {
 	constructor(...x) {
-		super(...x), this.position = "block", this.dark = !1, this.copy = "", this.background = "", this.id = "", this.name = "", this.disabled = !1, this.ariaLabel = "", this.ariaDescribedby = "", this.ariaPressed = "";
+		super(...x), this.position = "block", this.dark = !1, this.copy = "", this.background = "", this.size = "small", this.id = "", this.name = "", this.disabled = !1, this.ariaLabel = "", this.ariaDescribedby = "", this.ariaPressed = "";
 	}
 	static #e = this.properties = {
 		dark: { type: Boolean },
 		copy: { type: String },
 		position: { type: String },
 		background: { type: String },
+		size: { type: String },
 		id: { type: String },
 		style: { type: String },
 		name: { type: String },
@@ -747,8 +748,6 @@ var NCopy = class extends i {
 	static #t = this.styles = i$1`
         .copy-button {
             display: block;
-            width: 18px;
-            height: 18px;
             cursor: pointer;
             user-select: none;
             padding: 4px;
@@ -760,35 +759,35 @@ var NCopy = class extends i {
         }
     `;
 	render() {
-		let x = "";
-		switch (this.position) {
+		let x = "16px", j = "";
+		switch (this.size === "medium" ? x = "24px" : this.size === "large" && (x = "32px"), this.position) {
 			case "top right":
-				x = "position: absolute; top: 0; right: 0;";
+				j = "position: absolute; top: 0; right: 0;";
 				break;
 			case "bottom right":
-				x = "position: absolute; bottom: 0; right: 0;";
+				j = "position: absolute; bottom: 0; right: 0;";
 				break;
 			case "top left":
-				x = "position: absolute; top: 0; left: 0;";
+				j = "position: absolute; top: 0; left: 0;";
 				break;
 			case "bottom left":
-				x = "position: absolute; bottom: 0; left: 0;";
+				j = "position: absolute; bottom: 0; left: 0;";
 				break;
 			case "top":
-				x = "position: absolute; top: 0; right: 50%; transform: translateX(-50%);";
+				j = "position: absolute; top: 0; right: 50%; transform: translateX(-50%);";
 				break;
 			case "bottom":
-				x = "position: absolute; bottom: 0; right: 50%; transform: translateX(-50%);";
+				j = "position: absolute; bottom: 0; right: 50%; transform: translateX(-50%);";
 				break;
 			case "left":
-				x = "position: absolute; left: 0; top: 50%; transform: translateY(-50%);";
+				j = "position: absolute; left: 0; top: 50%; transform: translateY(-50%);";
 				break;
 			case "right":
-				x = "position: absolute; right: 0; top: 50%; transform: translateY(-50%);";
+				j = "position: absolute; right: 0; top: 50%; transform: translateY(-50%);";
 				break;
 			case "block":
 			default:
-				x = "position: unset;";
+				j = "position: unset;";
 				break;
 		}
 		return b`<div 
@@ -801,7 +800,7 @@ var NCopy = class extends i {
             aria-describedby="${this.ariaDescribedby || ""}"
             aria-pressed="${this.ariaPressed || ""}"
             class="copy-button"
-            style="${x}${this.background === "" ? "" : ` background: ${this.background};`}${this.style ? ` ${this.style}` : ""}">
+            style="${j}${` width: ${x}; height: ${x};`}${this.background === "" ? "" : ` background: ${this.background};`}${this.style ? ` ${this.style}` : ""}">
             <svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="${this.dark ? "white" : "black"}">
                 <path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/>
             </svg>

package/dist/n-components.umd.js

@@ -139,11 +139,9 @@
             class="${this.variant}${this.background||this.borderColor?` custom-color`:``}${this.dontPunch?` dont-punch`:``}${this.thin&&!this.thick?` thin`:this.thick?` thick`:``}${this.outlineOnly?` outline-only`:``}${this.scaleOnHover?` scale-hover`:``}${this.rounded&&!this.sharp?` rounded`:this.sharp?` sharp`:``} animation-${this.animation}"
             style="${e?`color: ${e}; `:``}${t&&!this.outlineOnly?`background: ${t}; `:``}${t&&!n?`border: 1px solid color-mix(in hsl, ${t} 100%, white 10%); `:n?`border: 1px solid ${n}; `:``}${r?`color: ${r}; `:``}${this.style}">
             <slot></slot>
-        </button>`}};Q=Z([X(`n-button`)],Q);var $=class extends Y{constructor(...e){super(...e),this.position=`block`,this.dark=!1,this.copy=``,this.background=``,this.id=``,this.name=``,this.disabled=!1,this.ariaLabel=``,this.ariaDescribedby=``,this.ariaPressed=``}static#e=this.properties={dark:{type:Boolean},copy:{type:String},position:{type:String},background:{type:String},id:{type:String},style:{type:String},name:{type:String},disabled:{type:Boolean},ariaLabel:{type:String,attribute:`aria-label`},ariaDescribedby:{type:String,attribute:`aria-describedby`},ariaPressed:{type:String,attribute:`aria-pressed`}};static#t=this.styles=s`
+        </button>`}};Q=Z([X(`n-button`)],Q);var $=class extends Y{constructor(...e){super(...e),this.position=`block`,this.dark=!1,this.copy=``,this.background=``,this.size=`small`,this.id=``,this.name=``,this.disabled=!1,this.ariaLabel=``,this.ariaDescribedby=``,this.ariaPressed=``}static#e=this.properties={dark:{type:Boolean},copy:{type:String},position:{type:String},background:{type:String},size:{type:String},id:{type:String},style:{type:String},name:{type:String},disabled:{type:Boolean},ariaLabel:{type:String,attribute:`aria-label`},ariaDescribedby:{type:String,attribute:`aria-describedby`},ariaPressed:{type:String,attribute:`aria-pressed`}};static#t=this.styles=s`
         .copy-button {
             display: block;
-            width: 18px;
-            height: 18px;
             cursor: pointer;
             user-select: none;
             padding: 4px;
@@ -153,7 +151,7 @@
         .copy-button:active {
             scale: 0.90;
         }
-    `;render(){let e=``;switch(this.position){case`top right`:e=`position: absolute; top: 0; right: 0;`;break;case`bottom right`:e=`position: absolute; bottom: 0; right: 0;`;break;case`top left`:e=`position: absolute; top: 0; left: 0;`;break;case`bottom left`:e=`position: absolute; bottom: 0; left: 0;`;break;case`top`:e=`position: absolute; top: 0; right: 50%; transform: translateX(-50%);`;break;case`bottom`:e=`position: absolute; bottom: 0; right: 50%; transform: translateX(-50%);`;break;case`left`:e=`position: absolute; left: 0; top: 50%; transform: translateY(-50%);`;break;case`right`:e=`position: absolute; right: 0; top: 50%; transform: translateY(-50%);`;break;case`block`:default:e=`position: unset;`;break}return R`<div 
+    `;render(){let e=`16px`,t=``;switch(this.size===`medium`?e=`24px`:this.size===`large`&&(e=`32px`),this.position){case`top right`:t=`position: absolute; top: 0; right: 0;`;break;case`bottom right`:t=`position: absolute; bottom: 0; right: 0;`;break;case`top left`:t=`position: absolute; top: 0; left: 0;`;break;case`bottom left`:t=`position: absolute; bottom: 0; left: 0;`;break;case`top`:t=`position: absolute; top: 0; right: 50%; transform: translateX(-50%);`;break;case`bottom`:t=`position: absolute; bottom: 0; right: 50%; transform: translateX(-50%);`;break;case`left`:t=`position: absolute; left: 0; top: 50%; transform: translateY(-50%);`;break;case`right`:t=`position: absolute; right: 0; top: 50%; transform: translateY(-50%);`;break;case`block`:default:t=`position: unset;`;break}return R`<div 
             ?disabled="${this.disabled}"
             id="${this.id||``}"
             @click="${this.handleCopy}"
@@ -163,7 +161,7 @@
             aria-describedby="${this.ariaDescribedby||``}"
             aria-pressed="${this.ariaPressed||``}"
             class="copy-button"
-            style="${e}${this.background===``?``:` background: ${this.background};`}${this.style?` ${this.style}`:``}">
+            style="${t}${` width: ${e}; height: ${e};`}${this.background===``?``:` background: ${this.background};`}${this.style?` ${this.style}`:``}">
             <svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 -960 960 960" width="18px" fill="${this.dark?`white`:`black`}">
                 <path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/>
             </svg>

package/package.json

@@ -2,7 +2,7 @@
     "name": "@trenoxxious/n-components",
     "description": "Customizable components for use with vanilla HTML, Javascript and CSS.",
     "private": false,
-    "version": "1.0.12",
+    "version": "1.0.14",
     "repository": "github:Trenoxxious/n-components",
     "keywords": [
         "web-components",
@@ -15,6 +15,7 @@
     "exports": {
         ".": "./dist/n-components.js"
     },
+    "readme": "../README.md",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

package/README.md

@@ -1,24 +0,0 @@
-# n-components
-Simple web components for use with *static* vanilla HTML, JS and CSS websites.
-
-To use, import with `<script src="https://unpkg.com/@trenoxxious/n-components@latest/dist/n-components.umd.js"></script>` in your HTML `<head>`.
-
-## Buttons
-**An n-component button element is called using `<n-button></n-button>` in any HTML document/context.**
-
-There are several options for n-button components, including:
-| Variable | Description | Default | Accepts |
-| -------- | -------- | -------- | -------- |
-| ***variant*** | Changes the main color theme of the button. | normal | normal, info, success, warning, alert |
-| ***dontPunch*** | Does not scale down when clicked if this is set to true. | false | true, false |
-| ***scaleOnHover*** | Will scale when hovered if this is set to true. | false | true, false |
-| ***outlineOnly*** | Will only show the outline of the button if this is set to true. | false | true, false |
-| ***animation*** | Sets the animation speed of most button animations. | normal | fast, normal, slow, very-slow |
-| ***thick*** | Sets the padding high on the button. | false | true, false |
-| ***thin*** | Sets the padding low on the button. | false | true, false |
-| ***dark*** | Sets the button text to white. | false | true, false |
-| ***background*** | Sets the button's background. | null | Any CSS-valid background |
-| ***borderColor*** | Sets the button's border color. | null | Any CSS-valid color string |
-| ***textColor*** | Sets the button's text color. | null | Any CSS-valid color string |
-| ***rounded*** | Rounds the button corners a little more. | false | true, false |
-| ***sharp*** | Sharpens the button corners. | false | true, false |