minor updates

docs/package.json

@@ -19,7 +19,7 @@
         "browser-sync": "^2.29.3",
         "cssnano": "^6.0.1",
         "del": "6.1.1",
-        "f11y": "^0.0.6",
+        "f11y": "^0.0.7",
         "gulp": "^4.0.2",
         "gulp-esbuild": "^0.11.2",
         "gulp-postcss": "^9.0.1",

docs/src/js/app.js

@@ -41,7 +41,7 @@ const accordionCallbackObj = new f11y.Accordion(
 
 const externalCallbackTriggers = document.querySelectorAll('.external-callback-trigger');
 externalCallbackTriggers.forEach(function(trigger) {
-    const item = accordionCallbackObj.accordionItems[trigger.dataset.index];
+    const item = accordionCallbackObj.items[trigger.dataset.index];
 
     trigger.addEventListener( 'click', function(e){
         accordionCallbackObj.toggle(item, e);
@@ -51,15 +51,24 @@ externalCallbackTriggers.forEach(function(trigger) {
 const tables = document.querySelectorAll('.f11y--table');
 tables.forEach(function(table) {
     let myTable = new f11y.Table(table);
-
-    console.log(myTable);
 });
 
 
 const layerDefaultModal = document.querySelector("#layer-default");
 new f11y.Layer(layerDefaultModal,
     {
-        onOpen : (event, layer) => { console.log(event, layer) },
-        onClose: (event, layer) => { console.log(event, layer) }
+        closeOnBackgroundClick: true,
+        awaitCloseAnimation: true,
+        awaitOpenAnimation: true,
+    }
+);
+
+
+const layerAlertModal = document.querySelector("#layer-alert");
+new f11y.Layer(layerAlertModal,
+    {
+        closeOnBackgroundClick: false,
+        awaitCloseAnimation: true,
+        awaitOpenAnimation: true,
     }
 );

docs/src/scss/partials/components/_accordion.scss

@@ -10,7 +10,7 @@
         display: none;
     }
 
-    .f11y--accordion__item{
+    [f11y-accordion-item]{
         border-radius: 2px;
 
         button{

docs/src/scss/partials/components/_modal.scss

@@ -7,22 +7,14 @@
     justify-content: center;
     align-items: center;
     padding: 3rem;
+    background: rgba(v.$f11y-white, 0.3);
+    backdrop-filter: blur(2px);
 
     &.is-open {
         display: flex;
         z-index: 100;
     }
 
-    .f11y--layer__overlay{
-        background: rgba(v.$f11y-white, 0.3);
-        backdrop-filter: blur(2px);
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        inset: 0;
-        z-index: 5;
-    }
-
     [role="dialog"] {
         border-radius: 0.3em;
         background-color: v.$f11y-dark;
@@ -71,58 +63,66 @@
     /* ------------------------------------------------
         Animation Modifier Classes
     -------------------------------------------------*/
-    &.block-modal--animate-slide[aria-hidden="false"] .block-modal__container {
-        animation: block-modal--slide-in .4s v.$timing-function;
+    &.is-animating.is-opening [role=dialog]{
+        animation: slide-in-up .4s v.$timing-function;
     }
 
-    &.block-modal--animate-slide[aria-hidden="true"] .block-modal__container {
-        animation: block-modal--slide-out .4s v.$timing-function;
+    &.is-animating.is-closing [role=dialog]{
+        animation: slide-out-down .4s v.$timing-function;
     }
 
-    &.block-modal--animate-fade[aria-hidden="false"] .block-modal__overlay {
-        animation: block-modal--fade-in .4s v.$timing-function;
+    &.is-animating.is-opening{
+        animation: fade-in .4s v.$timing-function;
     }
 
-    &.block-modal--animate-fade[aria-hidden="true"] .block-modal__overlay {
-        animation: block-modal--fade-out .4s v.$timing-function;
+    &.is-animating.is-closing{
+        animation: fade-out .4s v.$timing-function;
     }
 }
 
 /* ------------------------------------------------
     Animation Keyframes
 -------------------------------------------------*/
-@keyframes block-modal--fade-in {
+@keyframes fade-in {
     from {
-        opacity: 0;
+        background: rgba(v.$f11y-white, 0);
+        backdrop-filter: blur(0px);
     }
     to {
-        opacity: 1;
+        background: rgba(v.$f11y-white, 0.3);
+        backdrop-filter: blur(3px);
     }
 }
 
-@keyframes block-modal--fade-out {
+@keyframes fade-out {
     from {
-        opacity: 1;
+        background: rgba(v.$f11y-white, 0.3);
+        backdrop-filter: blur(3px);
     }
     to {
-        opacity: 0;
+        background: rgba(v.$f11y-white, 0);
+        backdrop-filter: blur(0px);
     }
 }
 
-@keyframes block-modal--slide-in {
+@keyframes slide-in-up {
     from {
+        opacity: 0;
         transform: translateY(15%);
     }
     to {
+        opacity: 1;
         transform: translateY(0);
     }
 }
 
-@keyframes block-modal--slide-out {
+@keyframes slide-out-down {
     from {
+        opacity: 1;
         transform: translateY(0);
     }
     to {
+        opacity: 0;
         transform: translateY(-10%);
     }
 }