@andreyshpigunov/x 0.5.7 → 0.5.9

package/index.html

@@ -19,7 +19,7 @@
   "functionName": "headerAnimation"
 }'>
   <header class="header flex aic sticky t0 px5 m:px6 l:px8 unselectable">
-    <div class="header-version nowrap">0.5.7</div>
+    <div class="header-version nowrap">0.5.9</div>
     <div class="header-logo mxa">
       <a role="button" x-scrollto="#top">
         <img src="assets/img/logo.png" alt="x" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@andreyshpigunov/x",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "x-js": "dist/x.js",
   "app-js": "assets/js/app.js",
   "targets": {

package/postcss.config.cjs

@@ -12,4 +12,4 @@ module.exports = {
       },
     },
   },
-};
+};

package/src/components/x/app.css

@@ -0,0 +1,12 @@
+/*----------------------------------------
+app.css
+Фиктивный app, для создания слоя
+
+Created by Andrey Shpigunov at 15.04.2026
+All right reserved.
+----------------------------------------*/
+
+
+.app {
+  position: relative;
+}

package/src/components/x/buttons.css

@@ -21,206 +21,202 @@ All right reserved.
   .buttons-group
 */
 
-@layer buttons {
-  
-  .button, [type=submit] {
-    /* Computed on the element so var(--button-color) respects .button_primary etc. */
-    --button-color-hover: color-mix(
-        in oklab,
-        var(--button-color) calc(100% - var(--button-hover-lighten)),
-        white var(--button-hover-lighten)
-      );
-    --button-color-active: color-mix(
-        in oklab,
-        var(--button-color) calc(100% - var(--button-active-darken)),
-        black var(--button-active-darken)
-      );
-    --button-font-color-hover: var(--button-font-color);
-    --button-font-color-active: var(--button-font-color);
+.button, [type=submit] {
+  /* Computed on the element so var(--button-color) respects .button_primary etc. */
+  --button-color-hover: color-mix(
+      in oklab,
+      var(--button-color) calc(100% - var(--button-hover-lighten)),
+      white var(--button-hover-lighten)
+    );
+  --button-color-active: color-mix(
+      in oklab,
+      var(--button-color) calc(100% - var(--button-active-darken)),
+      black var(--button-active-darken)
+    );
+  --button-font-color-hover: var(--button-font-color);
+  --button-font-color-active: var(--button-font-color);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  min-height: var(--button-height, calc(var(--button-font-size) * var(--button-height-coeff)));
+  padding: 0 var(--button-side-padding, calc(var(--button-font-size) * var(--button-side-padding-coeff)));
+  color: var(--button-font-color);
+  font-family: var(--button-font-family);
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  line-height: 1;
+  vertical-align: bottom;
+  white-space: nowrap;
+  text-align: center;
+  text-shadow: none;
+  text-transform: none;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  overflow: hidden;
+  border: none;
+  border-radius: var(--button-border-radius);
+  background-color: var(--button-color);
+  transition: var(--button-transition);
+  transform: var(--button-transform);
+  transform-origin: var(--button-transform-origin);
+  user-select: none;
+  appearance: none;
+  box-shadow: var(--button-box-shadow);
+  
+  & svg {
+    transform: translateZ(0);
+  }
   
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: auto;
-    min-height: var(--button-height, calc(var(--button-font-size) * var(--button-height-coeff)));
-    padding: 0 var(--button-side-padding, calc(var(--button-font-size) * var(--button-side-padding-coeff)));
-    color: var(--button-font-color);
-    font-family: var(--button-font-family);
-    font-size: var(--button-font-size);
-    font-weight: var(--button-font-weight);
-    line-height: 1;
-    vertical-align: bottom;
-    white-space: nowrap;
-    text-align: center;
-    text-shadow: none;
-    text-transform: none;
+  &:link,
+  &:visited {
     text-decoration: none;
-    outline: none;
-    cursor: pointer;
-    overflow: hidden;
-    border: none;
-    border-radius: var(--button-border-radius);
+    color: var(--button-font-color);
     background-color: var(--button-color);
-    transition: var(--button-transition);
     transform: var(--button-transform);
-    transform-origin: var(--button-transform-origin);
-    user-select: none;
-    appearance: none;
-    box-shadow: var(--button-box-shadow);
-    
-    & svg {
-      transform: translateZ(0);
-    }
-    
-    &:link,
-    &:visited {
-      text-decoration: none;
-      color: var(--button-font-color);
-      background-color: var(--button-color);
-      transform: var(--button-transform);
-    }
-    
-    &:focus-visible {
-      outline: solid .2rem #8888;
-      transition: none;
-    }
-    
-    @media (any-hover: hover) {
-      &:focus-visible,
-      &:hover,
-      &.hover {
-        text-decoration: none;
-        color: var(--button-font-color-hover);
-        background-color: var(--button-color-hover);
-        transform: var(--button-transform-hover);
-        box-shadow: var(--button-box-shadow-hover);
-      }
-    }
-    
-    &:active,
-    &.active {
-      text-decoration: none;
-      color: var(--button-font-color-active);
-      background-color: var(--button-color-active);
-      transform: var(--button-transform-active);
-      box-shadow: var(--button-box-shadow-active);
-    }
-  
-    &[disabled],
-    &.disabled {
-      opacity: var(--button-disabled-opacity);
-      pointer-events: none;
-    }
   }
   
-  
-  /* Predefined styles & colors */
-  
-  .button_spacy {
-    padding-top: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 0.75);
-    padding-bottom: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 0.75);
-    padding-left: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 1.25);
-    padding-right: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 1.25);
+  &:focus-visible {
+    outline: solid .2rem #8888;
+    transition: none;
   }
   
-  .button_label {
-    --button-height: calc(var(--line-height) * 1em);
-    --button-side-padding: .5em;
-    --button-font-size: inherit;
-    --button-border-radius: .5em;
-    vertical-align: baseline;
+  @media (any-hover: hover) {
+    &:focus-visible,
+    &:hover,
+    &.hover {
+      text-decoration: none;
+      color: var(--button-font-color-hover);
+      background-color: var(--button-color-hover);
+      transform: var(--button-transform-hover);
+      box-shadow: var(--button-box-shadow-hover);
+    }
   }
   
-  .button_primary {
-    --button-color: var(--color-primary);
-    --button-font-color: #fff;
-  }
-  .button_success {
-    --button-color: var(--color-success);
-    --button-font-color: #fff;
-  }
-  .button_warning {
-    --button-color: var(--color-warning);
-    --button-font-color: #fff;
-  }
-  .button_danger {
-    --button-color: var(--color-danger);
-    --button-font-color: #fff;
-  }
-  .button_white {
-    --button-color: #fff;
-    --button-font-color: #000;
-  }
-  .button_black {
-    --button-color: #111;
-    --button-font-color: #fff;
+  &:active,
+  &.active {
+    text-decoration: none;
+    color: var(--button-font-color-active);
+    background-color: var(--button-color-active);
+    transform: var(--button-transform-active);
+    box-shadow: var(--button-box-shadow-active);
   }
-  .button_clear {
-    --button-color: transparent;
-    --button-box-shadow: none;
-    --button-box-shadow-hover: none;
-    --button-box-shadow-active: none;
+
+  &[disabled],
+  &.disabled {
+    opacity: var(--button-disabled-opacity);
+    pointer-events: none;
   }
+}
+
+
+/* Predefined styles & colors */
+
+.button_spacy {
+  padding-top: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 0.75);
+  padding-bottom: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 0.75);
+  padding-left: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 1.25);
+  padding-right: calc(var(--button-font-size) * var(--button-side-padding-coeff) * 1.25);
+}
+
+.button_label {
+  --button-height: calc(var(--line-height) * 1em);
+  --button-side-padding: .5em;
+  --button-font-size: inherit;
+  --button-border-radius: .5em;
+  vertical-align: baseline;
+}
+
+.button_primary {
+  --button-color: var(--color-primary);
+  --button-font-color: #fff;
+}
+.button_success {
+  --button-color: var(--color-success);
+  --button-font-color: #fff;
+}
+.button_warning {
+  --button-color: var(--color-warning);
+  --button-font-color: #fff;
+}
+.button_danger {
+  --button-color: var(--color-danger);
+  --button-font-color: #fff;
+}
+.button_white {
+  --button-color: #fff;
+  --button-font-color: #000;
+}
+.button_black {
+  --button-color: #111;
+  --button-font-color: #fff;
+}
+.button_clear {
+  --button-color: transparent;
+  --button-box-shadow: none;
+  --button-box-shadow-hover: none;
+  --button-box-shadow-active: none;
+}
+
+
+/* Group */
+
+.buttons-group {
+  display: flex;
+  gap: calc(var(--space-1) / 2);
   
-  
-  /* Group */
-  
-  .buttons-group {
-    display: flex;
-    gap: calc(var(--space-1) / 2);
-    
-    & .button {
-      border-radius: 0;
-    }
-    
-    & .button:nth-child(1 of .button:not(.hidden)) {
-      border-top-left-radius: var(--button-border-radius);
-      border-bottom-left-radius: var(--button-border-radius);
-    }
-    
-    & .button:nth-last-child(1 of .button:not(.hidden)) {
-      border-top-right-radius: var(--button-border-radius);
-      border-bottom-right-radius: var(--button-border-radius);
-    }
+  & .button {
+    border-radius: 0;
   }
   
-  
-  /* Dropdown button */
-  
-  .button_dropdown {
-    --temp: calc(var(--button-font-size) * var(--button-side-padding-coeff));
-    padding-right: calc(var(--button-side-padding, var(--temp)) * 1.8);
-  
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      right: var(
-        --button-side-padding,
-        calc(var(--button-font-size) * var(--button-side-padding-coeff)
-      ));
-      width: .5em;
-      height: .5em;
-      margin-top: -.05em;
-      border-bottom: solid .15rem var(--button-font-color);
-      border-right: solid .15rem var(--button-font-color);
-      transform: rotate(45deg);
-      transform-origin: center;
-      will-change: opacity;
-      opacity: .4;
-      transition: opacity .1s ease-out;
-    }
-  }
-  .dropdown_bottom .button_dropdown::after {
-    transform: rotate(225deg);
-    margin-top: .35em;
+  & .button:nth-child(1 of .button:not(.hidden)) {
+    border-top-left-radius: var(--button-border-radius);
+    border-bottom-left-radius: var(--button-border-radius);
   }
   
-  .button_dropdown.active {
-    &::after {
-      opacity: 1;
-    }
+  & .button:nth-last-child(1 of .button:not(.hidden)) {
+    border-top-right-radius: var(--button-border-radius);
+    border-bottom-right-radius: var(--button-border-radius);
   }
+}
+
 
+/* Dropdown button */
+
+.button_dropdown {
+  --temp: calc(var(--button-font-size) * var(--button-side-padding-coeff));
+  padding-right: calc(var(--button-side-padding, var(--temp)) * 1.8);
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    right: var(
+      --button-side-padding,
+      calc(var(--button-font-size) * var(--button-side-padding-coeff)
+    ));
+    width: .5em;
+    height: .5em;
+    margin-top: -.05em;
+    border-bottom: solid .15rem var(--button-font-color);
+    border-right: solid .15rem var(--button-font-color);
+    transform: rotate(45deg);
+    transform-origin: center;
+    will-change: opacity;
+    opacity: .4;
+    transition: opacity .1s ease-out;
+  }
+}
+.dropdown_bottom .button_dropdown::after {
+  transform: rotate(225deg);
+  margin-top: .35em;
+}
+
+.button_dropdown.active {
+  &::after {
+    opacity: 1;
+  }
 }

package/src/components/x/colors.css

@@ -25,57 +25,53 @@ All right reserved.
   .bg-white
   .bg-grey
 */
-
-@layer colors {
     
-  .color-primary {
-    color: var(--color-primary);
-  }
-  .color-success {
-    color: var(--color-success);
-  }
-  .color-warning {
-    color: var(--color-warning);
-  }
-  .color-danger {
-    color: var(--color-danger);
-  }
-  .color-error {
-    color: var(--color-error);
-  }
-  .color-black {
-    color: var(--color-black);
-  }
-  .color-white {
-    color: var(--color-white);
-  }
-  .color-grey {
-    color: var(--color-grey);
-  }
-  
-  .bg-primary {
-    background-color: var(--color-primary);
-  }
-  .bg-success {
-    background-color: var(--color-success);
-  }
-  .bg-warning {
-    background-color: var(--color-warning);
-  }
-  .bg-danger {
-    background-color: var(--color-danger);
-  }
-  .bg-error {
-    background-color: var(--color-error);
-  }
-  .bg-black {
-    background-color: var(--color-black);
-  }
-  .bg-white {
-    background-color: var(--color-white);
-  }
-  .bg-grey {
-    background-color: var(--color-grey);
-  }
+.color-primary {
+  color: var(--color-primary);
+}
+.color-success {
+  color: var(--color-success);
+}
+.color-warning {
+  color: var(--color-warning);
+}
+.color-danger {
+  color: var(--color-danger);
+}
+.color-error {
+  color: var(--color-error);
+}
+.color-black {
+  color: var(--color-black);
+}
+.color-white {
+  color: var(--color-white);
+}
+.color-grey {
+  color: var(--color-grey);
+}
 
+.bg-primary {
+  background-color: var(--color-primary);
+}
+.bg-success {
+  background-color: var(--color-success);
+}
+.bg-warning {
+  background-color: var(--color-warning);
+}
+.bg-danger {
+  background-color: var(--color-danger);
+}
+.bg-error {
+  background-color: var(--color-error);
+}
+.bg-black {
+  background-color: var(--color-black);
+}
+.bg-white {
+  background-color: var(--color-white);
+}
+.bg-grey {
+  background-color: var(--color-grey);
 }