fix: correction for PR comments

components/button/src/Button.svelte

@@ -13,12 +13,12 @@
 <button
   class="resp-button resp-button--{variant} resp-button--{size} {className}"
   class:resp-button--outline={outline}
+  {...$$restProps}
   role="button"
   {type}
   {disabled}
   bind:this={ref}
   on:click
-  {...$$restProps}
 >
   <slot>{label}</slot>
 </button>

components/checkbox/src/Checkbox.svelte

@@ -2,13 +2,15 @@
   let className = "";
   export { className as class };
   export let ref: null | HTMLInputElement = null;
+  export let name = "";
   export let label = "";
   export let value = "";
   export let checked = false;
 </script>
 
 <label class="resp-checkbox {className}" {...$$restProps}>
   <input
+    {name}
     bind:this={ref}
     bind:checked
     type="checkbox"

components/chip/package.json

@@ -12,7 +12,7 @@
   "svelte": "src/Chip.svelte",
   "types": "types/index.d.ts",
   "exports": {
-    "require": "./lib/index.cjs"
+    "require": "./lib/cjs/index.js"
   },
   "publishConfig": {
     "access": "public"

components/chip/src/Chip.svelte

@@ -12,7 +12,15 @@
   const id = `chip-${Math.floor(Math.random() * Date.now())}`;
 </script>
 
-<input bind:this={ref} {id} {name} type="checkbox" bind:checked {disabled} />
+<input
+  bind:this={ref}
+  {id}
+  {name}
+  {disabled}
+  type="checkbox"
+  bind:checked
+  on:change
+/>
 <label
   class="resp-chip resp-chip--{size} {className}"
   class:resp-chip--disabled={disabled}

components/column/src/Column.svelte

@@ -3,22 +3,49 @@
 
   let className = "";
   export { className as class };
+  export let flex: null | number | string;
+  export let xs: number;
+  export let sm: number;
+  export let md: number;
+  export let lg: number;
+  export let xl: number;
+  export let sl: number;
   export let span: number | Device = 24;
   export let justify = "center";
 
+  const getClassName = (size: string, span: number) =>
+    `resp-col--${size}-${span}`;
+
+  const clsNames: string[] = [];
   let cls = `resp-col--${span}`;
+  if (sm) clsNames.push(getClassName("sm", sm));
+  if (md) clsNames.push(getClassName("md", md));
+  if (lg) clsNames.push(getClassName("lg", lg));
+  if (xl) clsNames.push(getClassName("xl", xl));
+  if (sl) clsNames.push(getClassName("sl", sl));
   if (isNaN(Number(span))) {
     cls = Object.entries(<Device>span)
       .map(([k, v]) => `resp-col--${k}-${v}`)
       .join(" ");
   }
 </script>
 
-<div class={`resp-col--${justify} ${cls} ${className}`} {...$$restProps}>
+<div
+  class={`resp-col--${justify} ${clsNames.join(" ")} ${className}`}
+  style="flex: {flex}"
+  {...$$restProps}
+>
   <slot />
 </div>
 
 <style lang="scss" global>
+  $sm: 576px;
+  $md: 768px;
+  $lg: 992px;
+  $xl: 1200px;
+  $sl: 1400px;
+  // $ul: 2048px;
+
   .resp-col {
     position: relative;
     max-width: 100%;
@@ -28,7 +55,7 @@
     word-break: break-word;
 
     &--24 {
-      $width: 100;
+      $width: 100%;
       flex: 0 0 $width;
       max-width: $width;
     }
@@ -82,6 +109,13 @@
       flex: 0 0 $width;
       max-width: $width;
     }
+    &--md--12 {
+      @media (min-width: $md) {
+        $width: 50%;
+        flex: 0 0 $width;
+        max-width: $width;
+      }
+    }
     &--11 {
       $width: 45.83333333%;
       flex: 0 0 $width;
@@ -117,24 +151,23 @@
       flex: 0 0 $width;
       max-width: $width;
     }
-
-    &--1 {
-      $width: 4.16666667%;
+    &--4 {
+      $width: 16.66666667%;
       flex: 0 0 $width;
       max-width: $width;
     }
-    &--2 {
-      $width: 8.33333333%;
+    &--3 {
+      $width: 12.5%;
       flex: 0 0 $width;
       max-width: $width;
     }
-    &--3 {
-      $width: 12.5%;
+    &--2 {
+      $width: 8.33333333%;
       flex: 0 0 $width;
       max-width: $width;
     }
-    &--4 {
-      $width: 16.66666667%;
+    &--1 {
+      $width: 4.16666667%;
       flex: 0 0 $width;
       max-width: $width;
     }
@@ -187,9 +220,4 @@
       }
     }
   }
-
-  @media (min-width: 700px) {
-  }
-  @media (min-width: 1200px) {
-  }
 </style>

components/docker/src/Docker.svelte

@@ -27,17 +27,18 @@
   on:click
   {...$$restProps}
 >
-  <header class="resp-docker__head">
-    <div class="resp-docker__head-label"><h2>{label}</h2></div>
+  <header class="resp-docker__header">
+    <div class="resp-docker__header-label"><h2>{label}</h2></div>
     <i class="resp-docker__icon" on:click={() => (open = false)}>
       {@html `<svg width="1em" height="1em" viewBox="64 64 896 896" focusable="false" data-icon="close" fill="currentColor" aria-hidden="true"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" /></svg>`}
     </i>
   </header>
-  <div class="resp-docker__main"><slot /></div>
+  <div class="resp-docker__body"><slot /></div>
 </aside>
 
 <style lang="scss">
-  $headHeight: 50px;
+  $headerHeight: 50px;
+
   @mixin dockerStyle {
     position: fixed;
     top: 0;
@@ -53,15 +54,15 @@
     box-shadow: 1px 0 10px rgba(0, 0, 0, 0.1);
     transform: translateX(0%);
 
-    &__head {
+    &__header {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       display: flex;
       align-items: center;
       padding: 0 15px;
-      height: $headHeight;
+      height: $headerHeight;
       border-bottom: 1px solid #dcdcdc;
 
       &-label {
@@ -80,10 +81,10 @@
       }
     }
 
-    &__main {
+    &__body {
       position: relative;
-      top: $headHeight;
-      height: calc(100% - $headHeight);
+      top: $headerHeight;
+      height: calc(100% - $headerHeight);
       overflow-y: auto;
     }
 

components/docker/types/index.d.ts

@@ -1,8 +1,11 @@
 import type { SvelteComponentTyped } from "svelte/internal";
 
 export interface DockerProps {
+  id?: string;
+  title?: string;
   class?: string;
   open?: boolean;
+  label: string;
   maskClosable?: boolean;
   width?: string;
   placement?: "left" | "right";

components/input/src/Input.svelte

@@ -32,14 +32,14 @@
 >
   <slot name="prefix" />
   <input
-    {...$$restProps}
     bind:this={ref}
     {type}
     {value}
     on:blur={() => (focused = false)}
     on:keyup={onKeyup}
     on:input
     on:change
+    {...$$restProps}
   />
   <slot name="suffix" />
 </div>

components/modal/src/Modal.svelte

@@ -72,7 +72,7 @@
   </div>
 {/if}
 
-<style lang="scss">
+<style lang="scss" global>
   .resp-modal {
     position: fixed;
     top: 50%;
@@ -103,6 +103,7 @@
         font-size: var(--font-size-lg, 24px);
         font-weight: 600;
         flex-grow: 1;
+        min-width: 0;
       }
 
       .resp-modal__header-close {

components/row/src/Row.svelte

@@ -3,11 +3,13 @@
   export { className as class };
   export let justifyContent = "space-between";
   export let alignItems = "flex-start";
+  export let wrap = true;
   export let style = "";
 </script>
 
 <div
   class="resp-row {className}"
+  class:resp-row--nowrap={!wrap}
   style="justify-content: {justifyContent}; align-items: {alignItems}; {style}"
   {...$$restProps}
 >
@@ -17,7 +19,15 @@
 <style lang="scss" global>
   .resp-row {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+    flex-flow: row wrap;
     row-gap: 0;
+
+    &--nowrap {
+      flex-wrap: nowrap;
+    }
+    @media (min-width: 576px) {
+      flex-direction: row;
+    }
   }
 </style>

components/scroll/src/Scroll.svelte

@@ -64,8 +64,8 @@
     </div>
   </span>
   <div
-    class="resp-scroll__container"
-    class:resp-scroll__container--scrollable={scrollable}
+    class="resp-scroll__box"
+    class:resp-scroll__box--scrollable={scrollable}
     bind:this={el}
     on:scroll
   >
@@ -90,7 +90,7 @@
     white-space: nowrap;
     overflow: hidden;
 
-    &__container {
+    &__box {
       flex-grow: 1;
       scroll-behavior: smooth;
       transition: all 0.5s;

components/table/package.json

@@ -49,8 +49,5 @@
   "bugs": {
     "url": "https://github.com/wetix/responsive-ui/issues"
   },
-  "gitHead": "fd5010a4fe0e250d52c7292f70d8e3702b7ffcfe",
-  "dependencies": {
-    "@responsive-ui/loader": "^1.0.9-alpha.0"
-  }
+  "gitHead": "fd5010a4fe0e250d52c7292f70d8e3702b7ffcfe"
 }

components/table/src/Table.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Loader from "@responsive-ui/loader";
   import type { TableColumn, TableItem } from "../types";
   import { fade } from "svelte/transition";
 
@@ -110,11 +109,6 @@
       {/if}
     </tbody>
   </table>
-  {#if loading}
-    <div class="resp-table__loader" in:fade out:fade>
-      <slot name="loader"><Loader size="small" /></slot>
-    </div>
-  {/if}
 </div>
 
 <style lang="scss" global>
@@ -130,19 +124,6 @@
     font-family: var(--font-family, inherit);
     border-color: transparent;
 
-    &__loader {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      background: rgba(255, 255, 255, 0.65);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 100;
-    }
-
     table {
       width: 100%;
       margin: 0 auto;