@t007/toast 0.0.4 → 0.0.5

package/{src/css → dist}/index.css

@@ -1,3 +1,4 @@
+/* src/css/index.css */
 :where(:root) {
   --t007-toast-font-family: inherit;
   --t007-toast-info-color: #3498db;
@@ -20,7 +21,6 @@
   --t007-toast-action-button-font-weight: 500;
   --t007-toast-x-color: red;
 }
-
 :where(:root, .t007-toast) {
   --t007-toast-type-color: whitesmoke;
   --t007-toast-focus-visible-color: var(--t007-toast-font-color);
@@ -33,7 +33,6 @@
   --t007-toast-action-button-background: rgba(from currentColor r g b / 0.1);
   --t007-toast-action-button-active-background: rgba(from currentColor r g b / 0.2);
 }
-
 :where(:root, .t007-toast-container) {
   --t007-toast-unit: 1rem;
   --t007-toast-container-margin-top: calc(var(--t007-toast-unit) / 2);
@@ -71,7 +70,6 @@
   --t007-toast-font-weight: inherit;
   --t007-toast-x-size: calc(var(--t007-toast-unit) * 1.75);
 }
-
 @keyframes t007-x-slide-bounce-in {
   from {
     transform: translateX(var(--t-from));
@@ -194,7 +192,6 @@
     transform: rotate(0deg) scale(1) translateZ(0);
   }
 }
-
 .t007-toast-container,
 .t007-toast-container *,
 .t007-toast-container *::after,
@@ -202,12 +199,10 @@
   box-sizing: border-box;
   font-family: var(--t007-toast-font-family);
 }
-
 .t007-toast-container *:focus-visible {
   outline: var(--t007-toast-focus-visible-outline);
   outline-offset: calc(var(--t007-toast-unit) / 7.5);
 }
-
 .t007-toast-container {
   position: var(--t007-toast-container-position);
   margin-top: var(--t007-toast-container-margin-top);
@@ -215,44 +210,38 @@
   margin-left: var(--t007-toast-container-margin-left);
   margin-right: var(--t007-toast-container-margin-right);
   max-width: calc(100% - var(--t007-toast-container-margin-left) - var(--t007-toast-container-margin-right));
-  /* remove next block to clip container viewport, clips sliding too */
-  /* max-height: calc(100% - var(--t007-toast-container-margin-top) - var(--t007-toast-container-margin-bottom));
-  overflow: hidden; */
   display: flex;
   flex-direction: column;
   gap: var(--t007-toast-container-gap);
   z-index: 2147483647;
   contain: layout;
 }
-
 .t007-toast-container *:disabled {
   filter: grayscale(100%);
   cursor: not-allowed;
 }
-
-.t007-toast-container[data-position^="top-"] {
+.t007-toast-container[data-position^=top-] {
   top: 0;
 }
-.t007-toast-container[data-position^="bottom-"] {
+.t007-toast-container[data-position^=bottom-] {
   bottom: 0;
 }
-.t007-toast-container[data-position^="center-"] {
+.t007-toast-container[data-position^=center-] {
   top: 50%;
   transform: translateY(-50%);
   margin-block: 0;
 }
-.t007-toast-container[data-position$="-right"] {
+.t007-toast-container[data-position$=-right] {
   right: 0;
 }
-.t007-toast-container[data-position$="-left"] {
+.t007-toast-container[data-position$=-left] {
   left: 0;
 }
-.t007-toast-container[data-position$="-center"] {
+.t007-toast-container[data-position$=-center] {
   left: 50%;
   translate: -50%;
   margin-inline: 0;
 }
-
 .t007-toast {
   position: relative;
   flex-shrink: 0;
@@ -280,85 +269,72 @@
   backdrop-filter: blur(var(--t007-toast-background-blur));
   overflow: hidden;
   will-change: transform, opacity;
-  transition:
-    transform 300ms ease,
-    opacity 300ms ease;
+  transition: transform 300ms ease, opacity 300ms ease;
   animation-timing-function: var(--t007-toast-animation-timing-function);
   animation-fill-mode: forwards;
   animation-duration: var(--t007-toast-animation-duration);
   touch-action: none;
 }
-
 .t007-toast:not(:has(.t007-toast-image, .t007-toast-icon:not(:empty))):has(.t007-toast-body) {
   padding-left: max(var(--t007-toast-padding), var(--t007-toast-smart-padding-left));
 }
-
 .t007-toast:not(:has(.t007-toast-cancel-button)) {
   padding-right: max(var(--t007-toast-padding), var(--t007-toast-smart-padding-right));
 }
-
-.t007-toast:is([data-drag-to-close="mouse"], [data-drag-to-close="true"]) {
+.t007-toast:is([data-drag-to-close=mouse], [data-drag-to-close=true]) {
   cursor: grab;
 }
-.t007-toast:is([data-drag-to-close="mouse"], [data-drag-to-close="true"]):active {
+.t007-toast:is([data-drag-to-close=mouse], [data-drag-to-close=true]):active {
   cursor: grabbing;
 }
-
-.t007-toast[data-animation^="slide"] {
+.t007-toast[data-animation^=slide] {
   --t-to: 0;
 }
-
-.t007-toast[data-animation="slide-left"] {
+.t007-toast[data-animation=slide-left] {
   --t-from: 100%;
   --t-bounce: -0%;
 }
-.t007-toast[data-animation="slide-right"] {
+.t007-toast[data-animation=slide-right] {
   --t-from: -100%;
   --t-bounce: 10%;
 }
-.t007-toast[data-animation="slide-up"] {
+.t007-toast[data-animation=slide-up] {
   --t-from: 100%;
   --t-bounce: -10%;
 }
-.t007-toast[data-animation="slide-down"] {
+.t007-toast[data-animation=slide-down] {
   --t-from: -100%;
   --t-bounce: 10%;
 }
-
-.t007-toast:is([data-animation="slide-left"], [data-animation="slide-right"]) {
+.t007-toast:is([data-animation=slide-left], [data-animation=slide-right]) {
   animation-name: t007-x-slide-bounce-out;
 }
-.t007-toast:is([data-animation="slide-left"], [data-animation="slide-right"]).t007-toast-show {
+.t007-toast:is([data-animation=slide-left], [data-animation=slide-right]).t007-toast-show {
   animation-name: t007-x-slide-bounce-in;
 }
-
-.t007-toast:is([data-animation="slide-up"], [data-animation="slide-down"]) {
+.t007-toast:is([data-animation=slide-up], [data-animation=slide-down]) {
   animation-name: t007-y-slide-bounce-out;
 }
-.t007-toast:is([data-animation="slide-up"], [data-animation="slide-down"]).t007-toast-show {
+.t007-toast:is([data-animation=slide-up], [data-animation=slide-down]).t007-toast-show {
   animation-name: t007-y-slide-bounce-in;
 }
-
-.t007-toast[data-animation="fade"] {
+.t007-toast[data-animation=fade] {
   animation-name: t007-fade-out;
 }
-.t007-toast[data-animation="fade"].t007-toast-show {
+.t007-toast[data-animation=fade].t007-toast-show {
   animation-name: t007-fade-in;
 }
-
-.t007-toast[data-animation="zoom"] {
+.t007-toast[data-animation=zoom] {
   animation-name: t007-zoom-out;
 }
-.t007-toast[data-animation="zoom"].t007-toast-show {
+.t007-toast[data-animation=zoom].t007-toast-show {
   animation-name: t007-zoom-in;
 }
-
 .t007-toast:is(.info, .success, .error, .warning) {
   --t007-toast-font-color: var(--t007-toast-type-color);
   --t007-toast-progress-background: var(--t007-toast-type-color);
   --t007-toast-progress-backdrop-background: rgb(from var(--t007-toast-type-color) r g b/0);
 }
-
 .t007-toast.info {
   --t007-toast-type-color: var(--t007-toast-info-color);
 }
@@ -371,7 +347,6 @@
 .t007-toast.warning {
   --t007-toast-type-color: var(--t007-toast-warning-color);
 }
-
 .t007-toast.progress::before,
 .t007-toast.progress::after {
   content: "";
@@ -381,17 +356,14 @@
   height: var(--t007-toast-progress-height);
   transition: width ease;
 }
-
 .t007-toast.progress::before {
   width: calc(var(--progress, 0) * 100%);
   background: var(--t007-toast-progress-background);
 }
-
 .t007-toast.progress::after {
   width: 100%;
   background: var(--t007-toast-progress-backdrop-background);
 }
-
 .t007-toast-image-wrapper {
   position: relative;
   flex: 0 0 var(--t007-toast-image-width);
@@ -400,7 +372,6 @@
   border-radius: var(--t007-toast-image-border-radius);
   overflow: hidden;
 }
-
 .t007-toast-image-wrapper:not(:has(.t007-toast-image)) {
   flex: 0 0 var(--t007-toast-icon-width);
   width: var(--t007-toast-icon-width);
@@ -410,11 +381,9 @@
   border-radius: 0;
   overflow: visible;
 }
-
 .t007-toast-image-wrapper:not(:has(.t007-toast-image, .t007-toast-icon:not(:empty))) {
   display: none;
 }
-
 .t007-toast-icon {
   position: absolute;
   inset: 0;
@@ -428,17 +397,15 @@
 .t007-toast-icon:where(:not(.t007-toast-loader)) {
   animation: t007-icon-expand 300ms ease;
 }
-.t007-toast-icon[data-icon="👋"] {
+.t007-toast-icon[data-icon=\1f44b] {
   transform-origin: bottom center;
-  animation: t007-icon-handwave 1800ms ease-in-out 2 1000ms; /* just a progressive enhancement surprise */
+  animation: t007-icon-handwave 1800ms ease-in-out 2 1000ms;
   will-change: transform;
 }
-
 .t007-toast .t007-toast-icon > svg {
   width: var(--t007-toast-icon-width);
   height: var(--t007-toast-icon-height);
 }
-
 .t007-toast-image-wrapper .t007-toast-image {
   min-height: 100%;
   height: 100%;
@@ -447,11 +414,9 @@
   object-fit: var(--t007-toast-image-object-fit);
   background: var(--t007-toast-no-image-background);
 }
-
-.t007-toast-image-wrapper [data-loaded="true"] {
+.t007-toast-image-wrapper [data-loaded=true] {
   background: var(--t007-toast-image-background);
 }
-
 .t007-toast-body {
   flex-grow: 1;
   height: fit-content;
@@ -459,7 +424,6 @@
   padding: calc(var(--t007-toast-unit) / 7.5);
   overflow: hidden;
 }
-
 .t007-toast-body-text {
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -468,7 +432,6 @@
   margin: 0;
   z-index: 1;
 }
-
 .t007-toast-actions-wrapper {
   width: var(--t007-toast-actions-container-width);
   max-width: var(--t007-toast-actions-container-max-width);
@@ -477,7 +440,6 @@
   flex-wrap: wrap;
   gap: var(--t007-toast-actions-container-gap);
 }
-
 .t007-toast-action-button {
   display: flex;
   justify-content: center;
@@ -496,14 +458,12 @@
     color 200ms ease,
     background-color 200ms ease;
 }
-
 .t007-toast-action-button:is(:hover, :focus-visible) {
   cursor: pointer;
   opacity: 1;
   color: var(--t007-toast-action-button-active-color);
   background: var(--t007-toast-action-button-active-background);
 }
-
 .t007-toast-cancel-button {
   display: flex;
   align-self: start;
@@ -515,12 +475,10 @@
   font-size: var(--t007-toast-x-size);
   opacity: 0.6;
 }
-
 .t007-toast-cancel-button:is(:hover, :focus-visible) {
   cursor: pointer;
   opacity: 1;
 }
-
 @media (max-width: 36rem) {
   :where(:root) {
     --t007-toast-unit: 0.9rem;

package/dist/index.global.js

@@ -77,9 +77,9 @@
     window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
     window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
     window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
-    window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/style.css`;
-    window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/style.css`;
-    window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/style.css`;
+    window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/index.css`;
+    window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/index.css`;
+    window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.css`;
   }
 
   // src/index.js

package/dist/standalone.js

@@ -75,9 +75,9 @@ if (typeof window !== "undefined") {
   window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
   window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
   window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
-  window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/style.css`;
-  window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/style.css`;
-  window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/style.css`;
+  window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/index.css`;
+  window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/index.css`;
+  window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.css`;
 }
 
 // src/index.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t007/toast",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A lightweight, pure JS toast system.",
   "author": "Oketade Oluwatobiloba <tobioketade007@gmail.com>",
   "license": "MIT",
@@ -18,28 +18,28 @@
   "module": "./dist/index.js",
   "unpkg": "./dist/index.global.js",
   "jsdelivr": "./dist/index.global.js",
-  "types": "./src/ts/types/index.d.ts",
-  "style": "./src/css/index.css",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/index.css",
   "sideEffects": [
     "*.css"
   ],
   "exports": {
     ".": {
-      "types": "./src/ts/types/index.d.ts",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./standalone": "./dist/standalone.js",
     "./global": "./dist/index.global.js",
-    "./style.css": "./src/css/index.css"
+    "./style.css": "./dist/index.css"
   },
   "scripts": {
     "build": "tsup --config ../../tsup.config.ts"
   },
   "files": [
     "dist",
-    "./src/ts/types/index.d.ts",
-    "./src/css/index.css"
+    "./dist/index.d.ts",
+    "./dist/index.css"
   ],
   "keywords": [
     "t007",