@andreyshpigunov/x 0.5.7 → 0.5.9

package/src/components/x/reset.css

@@ -19,180 +19,177 @@ All right reserved.
   All queries are mobile first.
 */
 
-@layer reset {
+
+html, body, main, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  vertical-align: baseline;
+  box-sizing: border-box;
+}
+:before,
+:after {
+  box-sizing: border-box;
+}
+html,
+body {
+  min-width: 320px;
+  min-height: 100vh;
+  max-height: none;
+}
+html {
+  line-height: var(--line-height);
+  font-family: var(--font-family);
+  font-size: calc(var(--font-size-base) * var(--font-scale));
+  background-color: var(--background-color);
+  font-synthesis: initial;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: #00000000;
+  font-feature-settings: 'liga', 'kern';
+  color: var(--font-color);
+  scroll-behavior: smooth;
+  scroll-padding-top: 10vh;
+  scroll-padding-bottom: 10vh;
+
+  /* !- Scaling */
+  &.scale5n { --font-scale: 0.75 }
+  &.scale4n { --font-scale: 0.80 }
+  &.scale3n { --font-scale: 0.85 }
+  &.scale2n { --font-scale: 0.90 }
+  &.scale1n { --font-scale: 0.95 }
+  &.scale0  { --font-scale: 1.00 }
+  &.scale1  { --font-scale: 1.05 }
+  &.scale2  { --font-scale: 1.10 }
+  &.scale3  { --font-scale: 1.15 }
+  &.scale4  { --font-scale: 1.20 }
+  &.scale5  { --font-scale: 1.25 }
   
-  html, body, main, div, span, object, iframe,
-  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-  a, abbr, acronym, address, big, cite, code,
-  del, dfn, em, img, ins, kbd, q, s, samp,
-  small, strike, strong, sub, sup, tt, var,
-  b, u, i, center, dl, dt, dd, ol, ul, li,
-  fieldset, form, label, legend,
-  table, caption, tbody, tfoot, thead, tr, th, td,
-  article, aside, canvas, details, embed,
-  figure, figcaption, footer, header, hgroup,
-  menu, nav, output, ruby, section, summary,
-  time, mark, audio, video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font: inherit;
-    vertical-align: baseline;
-    box-sizing: border-box;
-  }
-  :before,
-  :after {
-    box-sizing: border-box;
-  }
-  html,
-  body {
-    min-width: 320px;
-    min-height: 100vh;
-    max-height: none;
+  &.no-transitions * {
+    transition: none !important;
   }
+}
+@media (prefers-reduced-motion: reduce) {
   html {
-    line-height: var(--line-height);
-    font-family: var(--font-family);
-    font-size: calc(var(--font-size-base) * var(--font-scale));
-    background-color: var(--background-color);
-    font-synthesis: initial;
-    text-rendering: optimizeLegibility;
-    -webkit-text-size-adjust: 100%;
-    -webkit-tap-highlight-color: #00000000;
-    font-feature-settings: 'liga', 'kern';
-    color: var(--font-color);
-    scroll-behavior: smooth;
-    scroll-padding-top: 10vh;
-    scroll-padding-bottom: 10vh;
-  
-    /* !- Scaling */
-    &.scale5n { --font-scale: 0.75 }
-    &.scale4n { --font-scale: 0.80 }
-    &.scale3n { --font-scale: 0.85 }
-    &.scale2n { --font-scale: 0.90 }
-    &.scale1n { --font-scale: 0.95 }
-    &.scale0  { --font-scale: 1.00 }
-    &.scale1  { --font-scale: 1.05 }
-    &.scale2  { --font-scale: 1.10 }
-    &.scale3  { --font-scale: 1.15 }
-    &.scale4  { --font-scale: 1.20 }
-    &.scale5  { --font-scale: 1.25 }
-    
-    &.no-transitions * {
-      transition: none !important;
-    }
-  }
-  @media (prefers-reduced-motion: reduce) {
-    html {
-      scroll-behavior: auto;
-    }
+    scroll-behavior: auto;
   }
-  body {
-    font-size: var(--font-size);
-  }
-  blockquote, q {
-    quotes: none;
-    
-    &:before,
-    &:after {
-      content: none;
-    }
-  }
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
+}
+body {
+  font-size: var(--font-size);
+}
+blockquote, q {
+  quotes: none;
   
-    & tr td,
-    & tr th {
-      vertical-align: top;
-      text-align: left;
-    }
-  }
-  input[type=button],
-  input[type=submit],
-  input[type=reset],
-  input[type=radio],
-  input[type=checkbox],
-  select, button {
-    cursor: pointer;
-  }
-  input, textarea,
-  select, button {
-    margin: 0;
-  }
-  textarea {
-    line-height: var(--line-height);
-  }
-  a, button, .button,
-  input[type=button] {
-    touch-action: manipulation;
-  }
-  :focus {
-    outline: 0;
-  }
-  :focus-visible {
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
-  }
-  [hidden] {
-    display: none !important;
-  }
-  hr {
-    display: block;
-    height: .1rem;
-    margin: 1.6rem 0;
-    border: none;
-    background-color: #88888822;
-  }
-  sup, sub {
-    position: relative;
-    top: -.8em;
-    font-size: 1.1em;
-  }
-  sub {
-    top: auto;
-    bottom: -.8em;
-  }
-  mark {
-    margin: 0 -.4em;
-    padding: 0 .4em;
-    background-color: #fe0;
-  }
-  code, kbd, samp {
-    font-family: var(--font-family-mono);
+  &:before,
+  &:after {
+    content: none;
   }
-  strong, b {
-    font-weight: 700;
-  }
-  em, i, var, dfn, cite {
-    font-style: italic;
-  }
-  ins, u {
-    text-decoration: underline;
-  }
-  del, s {
-    text-decoration: line-through;
-  }
-  img {
-    display: block;
-    width: auto;
-    height: auto;
-    max-width: 100%;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+
+  & tr td,
+  & tr th {
+    vertical-align: top;
+    text-align: left;
   }
-  ul.reset,
-  ol.reset {
+}
+input[type=button],
+input[type=submit],
+input[type=reset],
+input[type=radio],
+input[type=checkbox],
+select, button {
+  cursor: pointer;
+}
+input, textarea,
+select, button {
+  margin: 0;
+}
+textarea {
+  line-height: var(--line-height);
+}
+a, button, .button,
+input[type=button] {
+  touch-action: manipulation;
+}
+:focus {
+  outline: 0;
+}
+:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+[hidden] {
+  display: none !important;
+}
+hr {
+  display: block;
+  height: .1rem;
+  margin: 1.6rem 0;
+  border: none;
+  background-color: #88888822;
+}
+sup, sub {
+  position: relative;
+  top: -.8em;
+  font-size: 1.1em;
+}
+sub {
+  top: auto;
+  bottom: -.8em;
+}
+mark {
+  margin: 0 -.4em;
+  padding: 0 .4em;
+  background-color: #fe0;
+}
+code, kbd, samp {
+  font-family: var(--font-family-mono);
+}
+strong, b {
+  font-weight: 700;
+}
+em, i, var, dfn, cite {
+  font-style: italic;
+}
+ins, u {
+  text-decoration: underline;
+}
+del, s {
+  text-decoration: line-through;
+}
+img {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+}
+ul.reset,
+ol.reset {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  
+  & > li {
     margin: 0;
     padding: 0;
-    list-style: none;
-    
-    & > li {
-      margin: 0;
-      padding: 0;
-    }
   }
-  pre {
-    font-family: var(--font-family-mono);
-    white-space: pre-wrap;
-  }
-
+}
+pre {
+  font-family: var(--font-family-mono);
+  white-space: pre-wrap;
 }

package/src/components/x/scroll.css

@@ -15,84 +15,80 @@ All right reserved.
   .scroll_x-proximity
   .scroll_x-mandatory
 */
-
-@layer scroll {
-  
-  .scroll {
-    flex-wrap: nowrap;
-    overflow-x: scroll;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    /* Hide scrollbar in IE and Edge */
-    -ms-overflow-style: none;
-    /* Hide scrollbar in Firefox */
-    scrollbar-width: none;
-    touch-action: pan-x;
-  
-    &::-webkit-scrollbar {
-      width: var(--scroll-scrollbar-size);
-      height: var(--scroll-scrollbar-size);
-    }
-  
-    &::-webkit-scrollbar-track {
-      background-color: none;
-      border-radius: var(--scroll-scrollbar-size);
-    }
   
-    &::-webkit-scrollbar-thumb {
-      border-radius: var(--scroll-scrollbar-size);
-      background-color: var(--scroll-scrollbar-thumb-background);
-      will-change: background-color;
-      transition: background .2s ease-out;
-      cursor: pointer;
-    }
-  
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: var(--scroll-scrollbar-thumb-background-hover);
-    }
-  
-    &::-webkit-scrollbar-button,
-    &::-webkit-scrollbar-track-piece,
-    &::-webkit-scrollbar-corner,
-    &::-webkit-resizer {
-      display: none;
-    }
+.scroll {
+  flex-wrap: nowrap;
+  overflow-x: scroll;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  /* Hide scrollbar in IE and Edge */
+  -ms-overflow-style: none;
+  /* Hide scrollbar in Firefox */
+  scrollbar-width: none;
+  touch-action: pan-x;
+
+  &::-webkit-scrollbar {
+    width: var(--scroll-scrollbar-size);
+    height: var(--scroll-scrollbar-size);
   }
-  
-  .scroll_x {
-    overflow-x: scroll;
-    overflow-y: hidden;
-    touch-action: pan-x;
+
+  &::-webkit-scrollbar-track {
+    background-color: none;
+    border-radius: var(--scroll-scrollbar-size);
   }
-  
-  .scroll_y {
-    overflow-x: hidden;
-    overflow-y: scroll;
-    touch-action: pan-y;
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: var(--scroll-scrollbar-size);
+    background-color: var(--scroll-scrollbar-thumb-background);
+    will-change: background-color;
+    transition: background .2s ease-out;
+    cursor: pointer;
   }
-  
-  .scroll_contain {
-    overscroll-behavior: contain;
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scroll-scrollbar-thumb-background-hover);
   }
-  
-  .scroll_x-proximity {
-    scroll-snap-type: x proximity;
+
+  &::-webkit-scrollbar-button,
+  &::-webkit-scrollbar-track-piece,
+  &::-webkit-scrollbar-corner,
+  &::-webkit-resizer {
+    display: none;
   }
-  .scroll_x-mandatory {
-    scroll-snap-type: x mandatory;
+}
+
+.scroll_x {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  touch-action: pan-x;
+}
+
+.scroll_y {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  touch-action: pan-y;
+}
+
+.scroll_contain {
+  overscroll-behavior: contain;
+}
+
+.scroll_x-proximity {
+  scroll-snap-type: x proximity;
+}
+.scroll_x-mandatory {
+  scroll-snap-type: x mandatory;
+}
+
+.scroll_x-proximity,
+.scroll_x-mandatory {
+  & > * {
+    scroll-snap-align: start;
   }
-  
-  .scroll_x-proximity,
-  .scroll_x-mandatory {
-    & > * {
-      scroll-snap-align: start;
-    }
-    &.scroll_align-center > * {
-      scroll-snap-align: center;
-    }
-    &.scroll_align-end > * {
-      scroll-snap-align: end;
-    }
+  &.scroll_align-center > * {
+    scroll-snap-align: center;
+  }
+  &.scroll_align-end > * {
+    scroll-snap-align: end;
   }
-
 }

package/src/components/x/sheets.css

@@ -7,10 +7,6 @@ All right reserved.
 ----------------------------------------*/
 
 
-@layer sheets {
-
-  [x-sheet]:not(.active) {
-    display: none;
-  }
-
+[x-sheet]:not(.active) {
+  display: none;
 }

package/src/components/x/slider.css

@@ -6,79 +6,75 @@ Created by Andrey Shpigunov at 13.04.2026
 All right reserved.
 ----------------------------------------*/
 
-
-@layer slider {
   
-  .slider {
-    display: flex;
-    position: relative;
-    overflow: hidden;
-    cursor: pointer;
-    touch-action: auto; /* по умолчанию не блокируем жесты; класс `.slider_touch` включает pan-y */
-    overscroll-behavior: contain;    /* не отдаём overscroll родителю */
-  }
-  .slider_touch {
-    touch-action: pan-y;  /* разрешаем только вертикальные жесты браузеру */
-  }
-  .slider-wrapper {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    pointer-events: auto;
-    will-change: transform;
-    transform: translateZ(0); /* создаёт отдельный композитный слой */
-    backface-visibility: hidden;
-  }
-  .slider-item {
-    display: flex;
-    position: relative;
-    min-width: 100%;
-    flex: 0 0 100%,
-  }
-  .slider-item a {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-  .slider-item img {
-    width: 100%;
-    max-width: none;
-    height: 100%;
-    object-fit: var(--slider-object-fit);
-    pointer-events: auto;
-  }
-  .slider-indicators {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    left: var(--slider-indicators-left);
-    right: var(--slider-indicators-right);
-    top: var(--slider-indicators-top);
-    bottom: var(--slider-indicators-bottom);
-    width: var(--slider-indicators-width);
-    height: var(--slider-indicators-height);
-    gap: var(--slider-indicators-gap);
-    opacity: var(--slider-indicators-init-opacity);
-    will-change: opacity;
-    transition: opacity .2s ease-out;
-    pointer-events: none;
-  }
-  .slider-indicators span {
-    display: flex;
-    flex: 1;
-    width: var(--slider-point-size);
-    min-width: var(--slider-point-size);
-    height: var(--slider-point-size);
-    border-radius: var(--slider-point-size);
-    background: var(--slider-point-color);
-    transition: background .1s ease-out;
-  }
-  .slider-indicators span.active {
-    background: var(--slider-point-color-active);
-  }
-  html.touch .slider .slider-indicators,
-  .slider:hover .slider-indicators {
-    opacity: 1;
-  }
-
+.slider {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  touch-action: auto; /* по умолчанию не блокируем жесты; класс `.slider_touch` включает pan-y */
+  overscroll-behavior: contain;    /* не отдаём overscroll родителю */
+}
+.slider_touch {
+  touch-action: pan-y;  /* разрешаем только вертикальные жесты браузеру */
+}
+.slider-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+  will-change: transform;
+  transform: translateZ(0); /* создаёт отдельный композитный слой */
+  backface-visibility: hidden;
+}
+.slider-item {
+  display: flex;
+  position: relative;
+  min-width: 100%;
+  flex: 0 0 100%,
+}
+.slider-item a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.slider-item img {
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  object-fit: var(--slider-object-fit);
+  pointer-events: auto;
+}
+.slider-indicators {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  left: var(--slider-indicators-left);
+  right: var(--slider-indicators-right);
+  top: var(--slider-indicators-top);
+  bottom: var(--slider-indicators-bottom);
+  width: var(--slider-indicators-width);
+  height: var(--slider-indicators-height);
+  gap: var(--slider-indicators-gap);
+  opacity: var(--slider-indicators-init-opacity);
+  will-change: opacity;
+  transition: opacity .2s ease-out;
+  pointer-events: none;
+}
+.slider-indicators span {
+  display: flex;
+  flex: 1;
+  width: var(--slider-point-size);
+  min-width: var(--slider-point-size);
+  height: var(--slider-point-size);
+  border-radius: var(--slider-point-size);
+  background: var(--slider-point-color);
+  transition: background .1s ease-out;
+}
+.slider-indicators span.active {
+  background: var(--slider-point-color-active);
+}
+html.touch .slider .slider-indicators,
+.slider:hover .slider-indicators {
+  opacity: 1;
 }