ngwr 0.5.2 → 1.0.0

package/icon/icons.d.ts

@@ -170,6 +170,10 @@ export declare const wrIconFileApk: {
     name: 'file-apk';
     data: string;
 };
+export declare const wrIconFileApks: {
+    name: 'file-apks';
+    data: string;
+};
 export declare const wrIconFileIpa: {
     name: 'file-ipa';
     data: string;
@@ -362,12 +366,12 @@ export declare const wrIconWarning: {
     name: 'warning';
     data: string;
 };
-export declare type wrIconName = 'add-circle-outline' | 'add-circle' | 'add' | 'alert-circle-outline' | 'alert-circle' | 'alert-squircle' | 'alert' | 'arrow-back-circle' | 'arrow-back' | 'arrow-bottom-circle' | 'arrow-bottom' | 'arrow-forward-circle' | 'arrow-forward' | 'arrow-top-circle' | 'arrow-top' | 'bug-outline' | 'bug' | 'caret-back-circle' | 'caret-back' | 'caret-forward-circle' | 'caret-forward' | 'checkmark-circle-outline' | 'checkmark-circle' | 'checkmark' | 'chevron-down' | 'chevron-up' | 'clock' | 'close-circle-outline' | 'close-circle' | 'close' | 'cog' | 'copy-outline' | 'copy' | 'discover' | 'document' | 'dots-horizontal' | 'dots-vertical' | 'download' | 'external-outline' | 'eye-off' | 'eye' | 'file-aab' | 'file-apk' | 'file-ipa' | 'file-zip' | 'filter-outline' | 'filter' | 'flash' | 'folder' | 'help' | 'home' | 'info-circle-outline' | 'lock-opened' | 'lock' | 'logo-android' | 'logo-app-center' | 'logo-app-gallery' | 'logo-apple' | 'logo-appscreener' | 'logo-appstore' | 'logo-firebase' | 'logo-github' | 'logo-google-play' | 'logo-oversecured' | 'logo-rustore' | 'logo-stingray' | 'modules' | 'moon' | 'play-back' | 'play-circle' | 'play-forward' | 'play' | 'plus-circle' | 'reader' | 'repeat' | 'search' | 'shield-checkmark-outline' | 'shield-checkmark' | 'shield-outline' | 'shield' | 'shuffle' | 'stop-circle' | 'stop' | 'sun' | 'terminal' | 'trash' | 'user-add' | 'user-circle' | 'user-remove' | 'user' | 'warning';
+export type wrIconName = 'add-circle-outline' | 'add-circle' | 'add' | 'alert-circle-outline' | 'alert-circle' | 'alert-squircle' | 'alert' | 'arrow-back-circle' | 'arrow-back' | 'arrow-bottom-circle' | 'arrow-bottom' | 'arrow-forward-circle' | 'arrow-forward' | 'arrow-top-circle' | 'arrow-top' | 'bug-outline' | 'bug' | 'caret-back-circle' | 'caret-back' | 'caret-forward-circle' | 'caret-forward' | 'checkmark-circle-outline' | 'checkmark-circle' | 'checkmark' | 'chevron-down' | 'chevron-up' | 'clock' | 'close-circle-outline' | 'close-circle' | 'close' | 'cog' | 'copy-outline' | 'copy' | 'discover' | 'document' | 'dots-horizontal' | 'dots-vertical' | 'download' | 'external-outline' | 'eye-off' | 'eye' | 'file-aab' | 'file-apk' | 'file-apks' | 'file-ipa' | 'file-zip' | 'filter-outline' | 'filter' | 'flash' | 'folder' | 'help' | 'home' | 'info-circle-outline' | 'lock-opened' | 'lock' | 'logo-android' | 'logo-app-center' | 'logo-app-gallery' | 'logo-apple' | 'logo-appscreener' | 'logo-appstore' | 'logo-firebase' | 'logo-github' | 'logo-google-play' | 'logo-oversecured' | 'logo-rustore' | 'logo-stingray' | 'modules' | 'moon' | 'play-back' | 'play-circle' | 'play-forward' | 'play' | 'plus-circle' | 'reader' | 'repeat' | 'search' | 'shield-checkmark-outline' | 'shield-checkmark' | 'shield-outline' | 'shield' | 'shuffle' | 'stop-circle' | 'stop' | 'sun' | 'terminal' | 'trash' | 'user-add' | 'user-circle' | 'user-remove' | 'user' | 'warning';
 export interface IWrIcon {
     name: wrIconName;
     data: string;
 }
-export declare type IWrIconNameSubset<T extends Readonly<IWrIcon[]>> = T[number]['name'];
+export type IWrIconNameSubset<T extends Readonly<IWrIcon[]>> = T[number]['name'];
 export declare const wrIconSet: ({
     name: 'add-circle-outline';
     data: string;
@@ -497,6 +501,9 @@ export declare const wrIconSet: ({
 } | {
     name: 'file-apk';
     data: string;
+} | {
+    name: 'file-apks';
+    data: string;
 } | {
     name: 'file-ipa';
     data: string;

package/input/input-types.d.ts

@@ -1,3 +1,3 @@
-export declare type WrInputAutocomplete = 'off' | 'name' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-extension' | 'url' | 'photo';
-export declare type WrInputModeType = 'text' | 'numeric' | 'tel' | 'email' | 'url';
-export declare type WrInputType = 'text' | 'number' | 'password' | 'email';
+export type WrInputAutocomplete = 'off' | 'name' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-extension' | 'url' | 'photo';
+export type WrInputModeType = 'text' | 'numeric' | 'tel' | 'email' | 'url';
+export type WrInputType = 'text' | 'number' | 'password' | 'email';

package/input/input.d.ts

@@ -61,5 +61,5 @@ export declare class WrInput extends WrAbstractBase implements ControlValueAcces
     onPasswordVisibilityChange(): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WrInput, "wr-input", ["wrInput"], { "placeholder": "placeholder"; "prefix": "prefix"; "suffix": "suffix"; "passwordIcons": "passwordIcons"; "type": "type"; "inputmode": "inputmode"; "disabled": "disabled"; "readonly": "readonly"; "required": "required"; "autofocus": "autofocus"; "autocomplete": "autocomplete"; "value": "value"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrInput, "wr-input", ["wrInput"], { "placeholder": { "alias": "placeholder"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "passwordIcons": { "alias": "passwordIcons"; "required": false; }; "type": { "alias": "type"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "0.5.2",
+  "version": "1.0.0",
   "license": "MIT",
   "description": "NGWR – Angular UI components library",
   "author": "Roman Khegay <rk@garuna.dev> (https://garuna.dev/)",
@@ -24,160 +24,122 @@
     ".": {
       "sass": "./_index.scss",
       "types": "./index.d.ts",
-      "esm2020": "./esm2020/ngwr.mjs",
-      "es2020": "./fesm2020/ngwr.mjs",
-      "es2015": "./fesm2015/ngwr.mjs",
-      "node": "./fesm2015/ngwr.mjs",
-      "default": "./fesm2020/ngwr.mjs"
+      "esm2022": "./esm2022/ngwr.mjs",
+      "esm": "./esm2022/ngwr.mjs",
+      "default": "./fesm2022/ngwr.mjs"
     },
     "./package.json": {
       "default": "./package.json"
     },
     "./button": {
       "types": "./button/index.d.ts",
-      "esm2020": "./esm2020/button/ngwr-button.mjs",
-      "es2020": "./fesm2020/ngwr-button.mjs",
-      "es2015": "./fesm2015/ngwr-button.mjs",
-      "node": "./fesm2015/ngwr-button.mjs",
-      "default": "./fesm2020/ngwr-button.mjs"
+      "esm2022": "./esm2022/button/ngwr-button.mjs",
+      "esm": "./esm2022/button/ngwr-button.mjs",
+      "default": "./fesm2022/ngwr-button.mjs"
     },
     "./checkbox": {
       "types": "./checkbox/index.d.ts",
-      "esm2020": "./esm2020/checkbox/ngwr-checkbox.mjs",
-      "es2020": "./fesm2020/ngwr-checkbox.mjs",
-      "es2015": "./fesm2015/ngwr-checkbox.mjs",
-      "node": "./fesm2015/ngwr-checkbox.mjs",
-      "default": "./fesm2020/ngwr-checkbox.mjs"
+      "esm2022": "./esm2022/checkbox/ngwr-checkbox.mjs",
+      "esm": "./esm2022/checkbox/ngwr-checkbox.mjs",
+      "default": "./fesm2022/ngwr-checkbox.mjs"
     },
-    "./core/abstract": {
-      "types": "./core/abstract/index.d.ts",
-      "esm2020": "./esm2020/core/abstract/ngwr-core-abstract.mjs",
-      "es2020": "./fesm2020/ngwr-core-abstract.mjs",
-      "es2015": "./fesm2015/ngwr-core-abstract.mjs",
-      "node": "./fesm2015/ngwr-core-abstract.mjs",
-      "default": "./fesm2020/ngwr-core-abstract.mjs"
-    },
-    "./core/color": {
-      "types": "./core/color/index.d.ts",
-      "esm2020": "./esm2020/core/color/ngwr-core-color.mjs",
-      "es2020": "./fesm2020/ngwr-core-color.mjs",
-      "es2015": "./fesm2015/ngwr-core-color.mjs",
-      "node": "./fesm2015/ngwr-core-color.mjs",
-      "default": "./fesm2020/ngwr-core-color.mjs"
-    },
-    "./core/decorators": {
-      "types": "./core/decorators/index.d.ts",
-      "esm2020": "./esm2020/core/decorators/ngwr-core-decorators.mjs",
-      "es2020": "./fesm2020/ngwr-core-decorators.mjs",
-      "es2015": "./fesm2015/ngwr-core-decorators.mjs",
-      "node": "./fesm2015/ngwr-core-decorators.mjs",
-      "default": "./fesm2020/ngwr-core-decorators.mjs"
-    },
-    "./core/overlay": {
-      "types": "./core/overlay/index.d.ts",
-      "esm2020": "./esm2020/core/overlay/ngwr-core-overlay.mjs",
-      "es2020": "./fesm2020/ngwr-core-overlay.mjs",
-      "es2015": "./fesm2015/ngwr-core-overlay.mjs",
-      "node": "./fesm2015/ngwr-core-overlay.mjs",
-      "default": "./fesm2020/ngwr-core-overlay.mjs"
-    },
-    "./core/types": {
-      "types": "./core/types/index.d.ts",
-      "esm2020": "./esm2020/core/types/ngwr-core-types.mjs",
-      "es2020": "./fesm2020/ngwr-core-types.mjs",
-      "es2015": "./fesm2015/ngwr-core-types.mjs",
-      "node": "./fesm2015/ngwr-core-types.mjs",
-      "default": "./fesm2020/ngwr-core-types.mjs"
+    "./divider": {
+      "types": "./divider/index.d.ts",
+      "esm2022": "./esm2022/divider/ngwr-divider.mjs",
+      "esm": "./esm2022/divider/ngwr-divider.mjs",
+      "default": "./fesm2022/ngwr-divider.mjs"
     },
     "./dialog": {
       "types": "./dialog/index.d.ts",
-      "esm2020": "./esm2020/dialog/ngwr-dialog.mjs",
-      "es2020": "./fesm2020/ngwr-dialog.mjs",
-      "es2015": "./fesm2015/ngwr-dialog.mjs",
-      "node": "./fesm2015/ngwr-dialog.mjs",
-      "default": "./fesm2020/ngwr-dialog.mjs"
-    },
-    "./divider": {
-      "types": "./divider/index.d.ts",
-      "esm2020": "./esm2020/divider/ngwr-divider.mjs",
-      "es2020": "./fesm2020/ngwr-divider.mjs",
-      "es2015": "./fesm2015/ngwr-divider.mjs",
-      "node": "./fesm2015/ngwr-divider.mjs",
-      "default": "./fesm2020/ngwr-divider.mjs"
+      "esm2022": "./esm2022/dialog/ngwr-dialog.mjs",
+      "esm": "./esm2022/dialog/ngwr-dialog.mjs",
+      "default": "./fesm2022/ngwr-dialog.mjs"
     },
     "./form": {
       "types": "./form/index.d.ts",
-      "esm2020": "./esm2020/form/ngwr-form.mjs",
-      "es2020": "./fesm2020/ngwr-form.mjs",
-      "es2015": "./fesm2015/ngwr-form.mjs",
-      "node": "./fesm2015/ngwr-form.mjs",
-      "default": "./fesm2020/ngwr-form.mjs"
+      "esm2022": "./esm2022/form/ngwr-form.mjs",
+      "esm": "./esm2022/form/ngwr-form.mjs",
+      "default": "./fesm2022/ngwr-form.mjs"
     },
     "./icon": {
       "types": "./icon/index.d.ts",
-      "esm2020": "./esm2020/icon/ngwr-icon.mjs",
-      "es2020": "./fesm2020/ngwr-icon.mjs",
-      "es2015": "./fesm2015/ngwr-icon.mjs",
-      "node": "./fesm2015/ngwr-icon.mjs",
-      "default": "./fesm2020/ngwr-icon.mjs"
+      "esm2022": "./esm2022/icon/ngwr-icon.mjs",
+      "esm": "./esm2022/icon/ngwr-icon.mjs",
+      "default": "./fesm2022/ngwr-icon.mjs"
     },
     "./input": {
       "types": "./input/index.d.ts",
-      "esm2020": "./esm2020/input/ngwr-input.mjs",
-      "es2020": "./fesm2020/ngwr-input.mjs",
-      "es2015": "./fesm2015/ngwr-input.mjs",
-      "node": "./fesm2015/ngwr-input.mjs",
-      "default": "./fesm2020/ngwr-input.mjs"
+      "esm2022": "./esm2022/input/ngwr-input.mjs",
+      "esm": "./esm2022/input/ngwr-input.mjs",
+      "default": "./fesm2022/ngwr-input.mjs"
     },
     "./skeleton": {
       "types": "./skeleton/index.d.ts",
-      "esm2020": "./esm2020/skeleton/ngwr-skeleton.mjs",
-      "es2020": "./fesm2020/ngwr-skeleton.mjs",
-      "es2015": "./fesm2015/ngwr-skeleton.mjs",
-      "node": "./fesm2015/ngwr-skeleton.mjs",
-      "default": "./fesm2020/ngwr-skeleton.mjs"
+      "esm2022": "./esm2022/skeleton/ngwr-skeleton.mjs",
+      "esm": "./esm2022/skeleton/ngwr-skeleton.mjs",
+      "default": "./fesm2022/ngwr-skeleton.mjs"
     },
     "./spinner": {
       "types": "./spinner/index.d.ts",
-      "esm2020": "./esm2020/spinner/ngwr-spinner.mjs",
-      "es2020": "./fesm2020/ngwr-spinner.mjs",
-      "es2015": "./fesm2015/ngwr-spinner.mjs",
-      "node": "./fesm2015/ngwr-spinner.mjs",
-      "default": "./fesm2020/ngwr-spinner.mjs"
+      "esm2022": "./esm2022/spinner/ngwr-spinner.mjs",
+      "esm": "./esm2022/spinner/ngwr-spinner.mjs",
+      "default": "./fesm2022/ngwr-spinner.mjs"
     },
     "./tag": {
       "types": "./tag/index.d.ts",
-      "esm2020": "./esm2020/tag/ngwr-tag.mjs",
-      "es2020": "./fesm2020/ngwr-tag.mjs",
-      "es2015": "./fesm2015/ngwr-tag.mjs",
-      "node": "./fesm2015/ngwr-tag.mjs",
-      "default": "./fesm2020/ngwr-tag.mjs"
+      "esm2022": "./esm2022/tag/ngwr-tag.mjs",
+      "esm": "./esm2022/tag/ngwr-tag.mjs",
+      "default": "./fesm2022/ngwr-tag.mjs"
     },
     "./tooltip": {
       "types": "./tooltip/index.d.ts",
-      "esm2020": "./esm2020/tooltip/ngwr-tooltip.mjs",
-      "es2020": "./fesm2020/ngwr-tooltip.mjs",
-      "es2015": "./fesm2015/ngwr-tooltip.mjs",
-      "node": "./fesm2015/ngwr-tooltip.mjs",
-      "default": "./fesm2020/ngwr-tooltip.mjs"
+      "esm2022": "./esm2022/tooltip/ngwr-tooltip.mjs",
+      "esm": "./esm2022/tooltip/ngwr-tooltip.mjs",
+      "default": "./fesm2022/ngwr-tooltip.mjs"
+    },
+    "./core/abstract": {
+      "types": "./core/abstract/index.d.ts",
+      "esm2022": "./esm2022/core/abstract/ngwr-core-abstract.mjs",
+      "esm": "./esm2022/core/abstract/ngwr-core-abstract.mjs",
+      "default": "./fesm2022/ngwr-core-abstract.mjs"
+    },
+    "./core/color": {
+      "types": "./core/color/index.d.ts",
+      "esm2022": "./esm2022/core/color/ngwr-core-color.mjs",
+      "esm": "./esm2022/core/color/ngwr-core-color.mjs",
+      "default": "./fesm2022/ngwr-core-color.mjs"
+    },
+    "./core/decorators": {
+      "types": "./core/decorators/index.d.ts",
+      "esm2022": "./esm2022/core/decorators/ngwr-core-decorators.mjs",
+      "esm": "./esm2022/core/decorators/ngwr-core-decorators.mjs",
+      "default": "./fesm2022/ngwr-core-decorators.mjs"
+    },
+    "./core/overlay": {
+      "types": "./core/overlay/index.d.ts",
+      "esm2022": "./esm2022/core/overlay/ngwr-core-overlay.mjs",
+      "esm": "./esm2022/core/overlay/ngwr-core-overlay.mjs",
+      "default": "./fesm2022/ngwr-core-overlay.mjs"
+    },
+    "./core/types": {
+      "types": "./core/types/index.d.ts",
+      "esm2022": "./esm2022/core/types/ngwr-core-types.mjs",
+      "esm": "./esm2022/core/types/ngwr-core-types.mjs",
+      "default": "./fesm2022/ngwr-core-types.mjs"
     }
   },
   "dependencies": {
-    "@angular/cdk": "^15.0.0",
+    "@angular/cdk": "^16.0.0",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/animations": ">=14.0.0 <16.0.0",
-    "@angular/common": ">=14.0.0 <16.0.0",
-    "@angular/core": ">=14.0.0 <16.0.0",
-    "@angular/forms": ">=14.0.0 <16.0.0",
-    "rxjs": ">=6.5.5 < 7.6.0"
+    "@angular/animations": ">=14.0.0 <17.0.0",
+    "@angular/common": ">=14.0.0 <17.0.0",
+    "@angular/core": ">=14.0.0 <17.0.0",
+    "@angular/forms": ">=14.0.0 <17.0.0",
+    "rxjs": ">=6.5.5 < 7.9.0"
   },
-  "module": "fesm2015/ngwr.mjs",
-  "es2020": "fesm2020/ngwr.mjs",
-  "esm2020": "esm2020/ngwr.mjs",
-  "fesm2020": "fesm2020/ngwr.mjs",
-  "fesm2015": "fesm2015/ngwr.mjs",
+  "module": "fesm2022/ngwr.mjs",
   "typings": "index.d.ts",
   "sideEffects": false
 }

package/skeleton/skeleton.d.ts

@@ -7,5 +7,5 @@ export declare class WrSkeleton {
     animated: BooleanInput;
     get elClasses(): SafeAny;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrSkeleton, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<WrSkeleton, "wr-skeleton", ["wrSkeleton"], { "color": "color"; "animated": "animated"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrSkeleton, "wr-skeleton", ["wrSkeleton"], { "color": { "alias": "color"; "required": false; }; "animated": { "alias": "animated"; "required": false; }; }, {}, never, never, false, never>;
 }

package/styles/grid.scss

@@ -1,55 +1,118 @@
-$columns: 12;
+// Variables
+$columns-count: 12;
 $gap: #{var(--wr-grid-gutter)};
-$breakpoints: (
-  xs: 640px,
-  sm: 768px,
-  md: 960px,
-  lg: 1170px,
-  xl: 1280px
+$breakpoints-map: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+  xga: 1600px,
+  fhd: 1920px,
+  rt: 2560px
+);
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px,
+  xga: 1530px,
+  fhd: 1830px,
+  rt: 2470px
 );
 
-.container {
-  width: calc(100% - var(--wr-grid-gutter));
+// Helpers
+@function bp-min($name, $breakpoints: $breakpoints-map) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+@function bp-max($name, $breakpoints: $breakpoints-map) {
+  $max: map-get($breakpoints, $name);
+  @return if($max and $max > 0, $max - .02, null);
+}
+@function bp-infix($name, $breakpoints: $breakpoints-map) {
+  @return if(bp-min($name, $breakpoints) == null, '', '-#{$name}');
+}
+@mixin media-breakpoint-up($name, $breakpoints: $breakpoints-map) {
+  $min: bp-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+@mixin media-breakpoint-down($name, $breakpoints: $breakpoints-map) {
+  $max: bp-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+@mixin make-container($gutter: $gap) {
+  width: 100%;
+  padding-right: calc($gap * 0.5);
+  padding-left: calc($gap * 0.5);
   margin-left: auto;
   margin-right: auto;
+}
+@mixin make-grid($columns: $columns-count, $breakpoints: $breakpoints-map) {
+  @each $bp in map-keys($breakpoints) {
+    $infix: bp-infix($bp, $breakpoints);
 
-  @each $bp, $value in $breakpoints {
-    @media only screen and (min-width: $value) {
-      max-width: $value;
+    @include media-breakpoint-up($bp, $breakpoints) {
+      @for $i from 1 through $columns {
+        .col#{$infix}-#{$i} {
+          grid-column: auto / span $i;
+        }
+      }
     }
   }
 }
 
-@mixin create-selectors($breakpoint: null) {
-  $infix: if($breakpoint == null, '', '-#{$breakpoint}');
+// Styles
+.container,
+.container-fluid {
+  @include make-container();
+}
 
-  @for $i from 1 through $columns {
-    .col#{$infix}-#{$i} {
-      grid-column-end: span $i;
-    }
-    .col-offset#{$infix}-#{$i} {
-      grid-column-start: $i + 1;
-    }
-    .row#{$infix}-#{$i} {
-      grid-row-end: span $i;
+@each $bp, $max-width in $container-max-widths {
+  .container-#{$bp} {
+    @extend .container-fluid;
+  }
+
+  @include media-breakpoint-up($bp, $breakpoints-map) {
+    %responsive-container-#{$bp} {
+      max-width: $max-width;
     }
-    .row-offset#{$infix}-#{$i} {
-      grid-row-start: $i + 1;
+
+    $extend-breakpoint: true;
+
+    @each $name, $width in $breakpoints-map {
+      @if ($extend-breakpoint) {
+        .container#{bp-infix($name, $breakpoints-map)} {
+          @extend %responsive-container-#{$bp};
+        }
+
+        // Once the current breakpoint is reached, stop extending
+        @if ($bp == $name) {
+          $extend-breakpoint: false;
+        }
+      }
     }
   }
 }
 
 .grid {
   display: grid;
-  grid-template-columns: repeat($columns, 1fr);
-  grid-gap: $gap;
+  grid-template-columns: repeat($columns-count, 1fr);
   gap: $gap;
-}
 
-@include create-selectors;
-
-@each $breakpoint, $width in $breakpoints {
-  @media (min-width: $width) {
-    @include create-selectors($breakpoint);
-  }
+  @include make-grid();
 }

package/styles/root.scss

@@ -140,11 +140,11 @@ html {
   &.dark {
     color-scheme: dark;
 
-    --wr-body-bg: #18152a;
-    --wr-body-bg-rgb: 24,21,42;
+    --wr-body-bg: #0c0815;
+    --wr-body-bg-rgb: 12,8,21;
     --wr-body-color: #fff;
 
-    --wr-border-color-base: #292349;
+    --wr-border-color-base: #211638;
 
     /* Dialog */
     --wr-dialog-bg: #18152a;

package/tag/tag.d.ts

@@ -14,5 +14,5 @@ export declare class WrTag {
     loading: BooleanInput;
     get elClasses(): SafeAny;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrTag, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WrTag, "wr-tag", ["wrTag"], { "color": "color"; "icon": "icon"; "iconPosition": "iconPosition"; "outlined": "outlined"; "rounded": "rounded"; "transparent": "transparent"; "hoverable": "hoverable"; "loading": "loading"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrTag, "wr-tag", ["wrTag"], { "color": { "alias": "color"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "outlined": { "alias": "outlined"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; "hoverable": { "alias": "hoverable"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/tooltip/tooltip-component.d.ts

@@ -27,5 +27,5 @@ export declare class WrTooltipComponent {
     onPositionChange(position: ConnectedOverlayPositionChange): void;
     onClickOutside(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrTooltipComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WrTooltipComponent, "wr-tooltip", never, { "message": "message"; "trigger": "trigger"; "visible": "visible"; "origin": "origin"; "position": "position"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrTooltipComponent, "wr-tooltip", never, { "message": { "alias": "message"; "required": false; }; "trigger": { "alias": "trigger"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "origin": { "alias": "origin"; "required": false; }; "position": { "alias": "position"; "required": false; }; }, {}, never, never, false, never>;
 }

package/tooltip/tooltip-directive.d.ts

@@ -18,5 +18,5 @@ export declare class WrTooltipDirective implements AfterViewInit {
     private onTooltipHide;
     private leaveDelay;
     static ɵfac: i0.ɵɵFactoryDeclaration<WrTooltipDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<WrTooltipDirective, "[wrTooltip]", ["wrTooltip"], { "message": "wrTooltip"; "trigger": "trigger"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WrTooltipDirective, "[wrTooltip]", ["wrTooltip"], { "message": { "alias": "wrTooltip"; "required": false; }; "trigger": { "alias": "trigger"; "required": false; }; }, {}, never, never, false, never>;
 }

package/tooltip/tooltip-trigger.d.ts

@@ -1 +1 @@
-export declare type WrTooltipTrigger = 'hover' | 'click';
+export type WrTooltipTrigger = 'hover' | 'click';