feather-k-demo-utils 0.0.44 → 0.0.45

package/lib/{DemoNotes.vue_vue_type_script_setup_true_lang-CkAIcxaN.js → DemoNotes.vue_vue_type_script_setup_true_lang-Rm-kVKhJ.js}

@@ -74,7 +74,7 @@ const y = ["aria-expanded"], x = { key: 0 }, S = { key: 1 }, C = { key: 2 }, $ =
       m(o.$slots, "default", {}, void 0, !0)
     ], 10, B));
   }
-}), T = /* @__PURE__ */ f(A, [["__scopeId", "data-v-2cfcbdc1"]]), E = ["aria-expanded"], N = /* @__PURE__ */ v({
+}), T = /* @__PURE__ */ f(A, [["__scopeId", "data-v-25eb8f20"]]), E = ["aria-expanded"], N = /* @__PURE__ */ v({
   __name: "DemoSettings",
   props: {
     active: { type: Boolean }

package/lib/components/index.es.js

@@ -1,4 +1,4 @@
-import { D as s, _ as a, a as t, b as D } from "../DemoNotes.vue_vue_type_script_setup_true_lang-CkAIcxaN.js";
+import { D as s, _ as a, a as t, b as D } from "../DemoNotes.vue_vue_type_script_setup_true_lang-Rm-kVKhJ.js";
 export {
   s as DemoDebug,
   a as DemoNotes,

package/lib/index.es.js

@@ -1,5 +1,5 @@
 import { F as a, a as t, f as o, g as r, b as S } from "./cdnVersion-DGJCb4AH.js";
-import { D, _ as E, a as F, b as _ } from "./DemoNotes.vue_vue_type_script_setup_true_lang-CkAIcxaN.js";
+import { D, _ as E, a as F, b as _ } from "./DemoNotes.vue_vue_type_script_setup_true_lang-Rm-kVKhJ.js";
 export {
   D as DemoDebug,
   E as DemoNotes,

package/lib/styles/demo.css

@@ -153,74 +153,13 @@
   }
 }
 
-.demo-debug {
-  position: fixed;
-  font-family: var(--kendo-font-family-monospace);
-  left: var(--kendo-spacing-4);
-  bottom: var(--kendo-spacing-4);
-  background-color: var(--kendo-color-light);
-  color: var(--kendo-color-light);
-  font-size: var(--kendo-font-size-sm);
-  margin: var(--kendo-spacing-2);
-  padding: var(--kendo-spacing-2);
-  padding-left: 2em;
-  border-radius: var(--kendo-border-radius-md);
-  width: 28rem;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  left: -26rem;
-  transition: left 0.3s ease;
-  &:hover {
-    background-color: hsl(from var(--kendo-color-light) h s 85% / 0.9);
-    color: var(--kendo-color-dark);
-  }
-  &.active,
-  &:focus-visible {
-    left: -1em;
-    outline-offset: 4px;
-    color: initial;
-  }
-  /* &:focus-visible {
-    outline: 2px solid var(--kendo-color-primary-subtle-active);
-  } */
-  &::before {
-    content: "DEBUG";
-    font-weight: bold;
-    font-size: var(--kendo-font-size-lg);
-    display: block;
-    margin-bottom: var(--kendo-spacing-2);
-  }
-  /* &::after {
-    content: "🐛";
-    content: "🐜";
-    content: "🪳";
-    content: "🐞";
-    font-size: var(--kendo-font-size-xl);
-    color: var(--kendo-color-secondary);
-    position: absolute;
-    top: 0.25em;
-    right: 0.25em;
-    display: block;
-    margin-top: 0;
-  } */
-  & .toggle-btn {
-    position: absolute;
-    top: 0.25em;
-    right: 0.25em;
-    font-size: var(--kendo-font-size-xl);
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: var(--kendo-color-secondary);
-    padding: 0;
-    margin: 0;
-  }
-}
+/* #region REFACTOR STYLE */
 
-.demo-settings {
+/* #region COMMON */
+.demo-settings,
+.demo-debug,
+.demo-stats {
   position: fixed;
-  left: var(--kendo-spacing-4);
-  top: var(--kendo-spacing-4);
   background-color: hsl(from var(--kendo-color-light) h s l / 0.95);
   color: hsl(from var(--kendo-color-light) h s l / 0.95);
   font-size: var(--kendo-font-size-sm);
@@ -240,39 +179,39 @@
   &.active,
   &:focus-visible {
     left: -1em;
-    /* outline: 2px solid var(--kendo-color-primary-emphasis); */
     outline-offset: 4px;
     color: initial;
   }
 
   &::before {
-    content: "SETTINGS";
     font-weight: bold;
     font-size: var(--kendo-font-size-lg);
     display: block;
     margin-bottom: var(--kendo-spacing-2);
   }
-  /* &::after {
-    content: "\2699";
-    content: "⚙️";
-    font-size: var(--kendo-font-size-xl);
-    position: absolute;
-    top: 0.25em;
-    right: 0.25em;
-    display: block;
-    margin-top: 0;
-  } */
   & .toggle-btn {
     position: absolute;
     top: 0;
-    right: 0.125em;
+    right: 0;
     display: flex;
     justify-content: flex-end;
     border: none;
     cursor: pointer;
-    font-size: 1.5em;
+    font-size: var(--kendo-font-size-xl);
     height: 100%;
     border-radius: 0 0.25em 0.25em 0;
+    width: fit-content;
+  }
+}
+/* #endregion COMMON: */
+
+/* #region demo-settings override */
+.demo-settings {
+  top: var(--kendo-spacing-4);
+  &::before {
+    content: "SETTINGS";
+  }
+  & .toggle-btn {
     background: linear-gradient(
       28deg,
       hsl(from currentColor h s 95% / 0.5) 60%,
@@ -280,75 +219,63 @@
     );
   }
 }
+/* #endregion demo-settings override */
+
+/* #region demo-debug override */
+.demo-debug {
+  bottom: var(--kendo-spacing-4);
+  &::before {
+    content: "DEBUG";
+  }
+  & .toggle-btn {
+    background: linear-gradient(
+      28deg,
+      hsl(from currentColor h s 95% / 0.5) 60%,
+      var(--kendo-color-primary-subtle-hover) 75%
+    );
+  }
+}
+
+/* #endregion demo-debug override */
 
-/* TODO:  DemoStats.vue SCOPED STYLES NOT WORKING - moved to demo.css */
+/* #region demo-stats override */
 .demo-stats {
-  position: fixed;
   text-align: right;
   bottom: var(--kendo-spacing-4);
   right: var(--kendo-spacing-4);
-  background-color: var(--kendo-color-light);
-  color: var(--kendo-color-light);
-  font-size: var(--kendo-font-size-sm);
-  /* color: var(--kendo-color-primary-subtle); */
-  margin: var(--kendo-spacing-2);
-  padding: var(--kendo-spacing-2);
+  left: auto;
   padding-right: 2em;
-  border-radius: var(--kendo-border-radius-md);
-  width: 28rem;
-  overflow-wrap: break-word;
-  word-break: break-word;
   transition: right 0.3s ease;
   right: -26rem;
-  &:hover {
-    background-color: hsl(from var(--kendo-color-light) h s 85% / 0.9);
+
+  &::before {
+    content: "STATS";
   }
   &.active,
   &:focus-visible {
     right: -1em;
-    /* outline: 2px solid var(--kendo-color-primary-emphasis); */
-    outline-offset: 4px;
-    color: initial;
+    left: unset;
   }
-  &::before {
-    content: "STATS";
-    font-weight: bold;
-    font-size: var(--kendo-font-size-lg);
-    display: block;
-    margin-bottom: var(--kendo-spacing-2);
-    /* position: absolute; */
-    left: 0.5em;
-    top: 0.25em;
-  }
-  /* &::after {
-    content: "📊";
-    font-size: var(--kendo-font-size-xl);
-    position: absolute;
-    top: 0.25em;
-    left: 0.25em;
-    display: block;
-    margin-top: 0;
-  } */
 
   & .toggle-btn {
     position: absolute;
     top: 0;
     left: 0.125em;
     display: flex;
-    justify-content: flex-end;
-    border: none;
-    cursor: pointer;
-    font-size: 1.5em;
-    height: 100%;
-    border-radius: 0 0.25em 0.25em 0;
+    justify-content: flex-start;
+    border-radius: 0.25em 0 0 0.25em;
     background: linear-gradient(
-      315deg,
+      332deg,
       hsl(from currentColor h s 95% / 0.5) 40%,
-      var(--kendo-color-primary-subtle-hover) 55%
+      var(--kendo-color-primary-emphasis) 55%
     );
   }
 }
+/* #endregion demo-stats override */
+
+/* #endregion REFACTOR STYLE: */
 
+/* #region PINNED CONTENT */
 .demo-debug pre,
 .demo-notes pre,
 .demo-settings {
@@ -361,6 +288,8 @@
   white-space: normal;
 }
 
+/* #endregion PINNED CONTENT */
+
 .hidden {
   display: none;
 }

package/lib/utils/index.es.js

@@ -1,5 +1,5 @@
 import { F as a, a as t, f as o, g as r, b as S } from "../cdnVersion-DGJCb4AH.js";
-import { D, _ as E, a as F, b as _ } from "../DemoNotes.vue_vue_type_script_setup_true_lang-CkAIcxaN.js";
+import { D, _ as E, a as F, b as _ } from "../DemoNotes.vue_vue_type_script_setup_true_lang-Rm-kVKhJ.js";
 export {
   D as DemoDebug,
   E as DemoNotes,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "feather-k-demo-utils",
   "private": false,
-  "version": "0.0.44",
+  "version": "0.0.45",
   "type": "module",
   "main": "lib/index.es.js",
   "module": "lib/index.es.js",