chore: release 5.0.0 (main-beta -> main)

.releaserc.yml

@@ -23,7 +23,7 @@ branches:
 # Release configuration
 plugins:
   - - "@semantic-release/commit-analyzer"
-    - preset: angular
+    - preset: conventionalcommits
       releaseRules:
         - type: style
           release: patch
@@ -46,7 +46,7 @@ plugins:
           release: patch
 
   - - "@semantic-release/release-notes-generator"
-    - preset: angular
+    - preset: conventionalcommits
       parserOpts:
         noteKeywords:
           - BREAKING CHANGE

README.md

@@ -40,7 +40,6 @@ to meet your project needs.
 
 ESL is based solely on Web API and ECMAScript 6 features, which let our web UI components library work 
 well across all modern browsers such as Firefox, Chrome, Safari, Opera, and Edge. 
-ESL can also work on IE11 when the whole list of polyfills is provided (see [Browser support & Polyfills](https://github.com/exadel-inc/esl/blob/HEAD/docs/BROWSER_SUPPORT.md) for more details).
 
 ## Library Structure
 

docs/BROWSER_SUPPORT.md

@@ -6,17 +6,11 @@ Exadel Smart Library does not have dependencies but uses the following list of n
 
 - ECMAScript 6 features
     - [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) (no Iterable Objects support required)
-      ([ESL polyfill](../src/polyfills/list/es6.array.from.ts) provided)
     - [Array.prototype.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
-      ([ESL polyfill](../src/polyfills/list/es6.array.find.ts) provided)
     - [Array.prototype.findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
-      ([ESL polyfill](../src/polyfills/list/es6.array.find.ts) provided)
     - [Array.prototype.include](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
-      ([ESL polyfill](../src/polyfills/list/es6.array.includes.ts) provided)
     - [Object.is](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)
-      ([ESL polyfill](../src/polyfills/list/es6.object.is.ts) provided)
     - [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) (accurate polyfill required)
-      ([ESL polyfill](../src/polyfills/list/es6.object.assign.ts) provided)
     - [ES6 Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
 - Web API
     - [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) constructor + `preventDefault` polyfill
@@ -30,25 +24,6 @@ Exadel Smart Library does not have dependencies but uses the following list of n
     - [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
     - [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
 
-All of them are fully supported by modern browsers such as Chrome, Firefox, Safari or Edge (>43).
+All of them are fully supported by modern browsers such as Chrome, Firefox, Safari (>13) or Edge (>43).
 
-In order to make ESL work in older browsers, you can use a "light" polyfills list of IntersectionObserver, ResizeObserver and Custom Elements (for older versions of Edge and Safari).
-
-Or make the library work in IE11 or Edge (<14) by using the "full" polyfills list provided.
-
-See more details on what polyfill approach might look like in the demo pages source code.
-
-Also, ESL has built-in polyfills for some of DOM and ES6 features. They are available under [polyfills](../src/polyfills) directory:
-  - ECMA Script 5: output shim (`HTMLElement` constructor call) - [es5-target-shim.ts](../src/polyfills/es5-target-shim.ts)
-  - ECMA Script 5: IE11, Edge <14 support - [polyfills.es5.ts](../src/polyfills/polyfills.es5.ts)
-    - `Object.is`, `Object.assign` 
-    - `Array.from`, `Array.prototype.find`, `Array.prototype.findIndex`, `Array.prototype.index`
-    - `Event`, `CustomEvent`, `MouseEvent`, `KeyboardEvent`, `FocusEvent` shim
-    - `Event.prototype.preventDefault` shim
-    - `Element.prototype.closest`
-    - `DOMTokenList.prototype.toggle`
-    - *Note: there is no promise polyfill embedded*, use npm:[promise-polyfill](https://www.npmjs.com/package/promise-polyfill) or similar
-  - ECMA Script 6: DOM - [polyfills.es6.ts](../src/polyfills/polyfills.es6.ts)
-    - `Node.isConnected` 
-    - `KeyboardKey.prototype.key` 
-    - `Element.prototype.toggleAttribute` 
+In order to make ESL work in older browsers, you can use polyfill (for older versions of Safari).

e2e/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@exadel/esl-snapshot-tests",
-  "version": "4.17.1",
+  "version": "5.0.0-beta.22",
   "description": "Integration snapshot tests for ESL",
   "homepage": "https://esl-ui.com/",
   "license": "MIT",

eslint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exadel/eslint-plugin-esl",
-  "version": "4.17.1",
+  "version": "5.0.0-beta.22",
   "keywords": [
     "eslint",
     "eslint-plugin",
@@ -9,6 +9,10 @@
   "license": "MIT",
   "description": "Helper ESLint rules to find and migrate ESL (@exadel/esl) library deprecations",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*.{js,ts,md}"
+  ],
   "scripts": {
     "prepare": "npm run build",
     "test": "jest",
@@ -18,12 +22,8 @@
   "dependencies": {
     "semver": "^7.6.2"
   },
-  "files": [
-    "dist/**/*"
-  ],
-  "types": "dist/index.d.ts",
   "peerDependencies": {
-    "@exadel/esl": "^4.0.0",
+    "@exadel/esl": "*",
     "eslint": ">=8.0.0"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exadel/esl",
-  "version": "4.17.1",
+  "version": "5.0.0-beta.22",
   "private": false,
   "description": "Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components",
   "license": "MIT",
@@ -45,10 +45,14 @@
     "modules/esl-media/providers/**/*.js",
     "modules/esl-share/actions/**/*.js",
     "modules/esl-share/buttons/**/*.js",
+    "modules/esl-carousel/core.js",
+    "modules/esl-carousel/renderers/**/*.js",
+    "src/modules/lib.ts",
     "src/modules/esl-media/providers/**/*.ts",
     "src/modules/esl-share/actions/**/*.ts",
     "src/modules/esl-share/buttons/**/*.ts",
-    "src/modules/lib.ts",
+    "src/modules/esl-carousel/core.ts",
+    "src/modules/esl-carousel/renderers/**/*.ts",
     "polyfills/**/*.js",
     "src/polyfills/**/*.ts"
   ],

site/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exadel/esl-website",
-  "version": "4.17.1",
+  "version": "5.0.0-beta.22",
   "private": true,
   "description": "ESL Website source",
   "homepage": "https://esl-ui.com/",
@@ -37,15 +37,12 @@
     "@juggle/resize-observer": "^3.4.0",
     "@types/prismjs": "^1.26.4",
     "@types/smoothscroll-polyfill": "^0.3.4",
-    "@webcomponents/custom-elements": "1.6.0",
     "clean-css-cli": "^5.6.3",
     "html-minifier-terser": "^7.2.0",
     "image-size": "^1.1.1",
-    "intersection-observer": "^0.12.2",
     "js-yaml": "^4.1.0",
     "out-url": "^1.2.2",
     "prismjs": "^1.29.0",
-    "promise-polyfill": "^8.3.0",
     "smoothscroll-polyfill": "^0.4.4",
     "ts-loader": "^9.5.1",
     "webpack": "^5.92.1",

site/src/common/card.less

@@ -0,0 +1,17 @@
+.card {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 100px;
+  flex-direction: column;
+  background: #fff;
+  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.3);
+
+  &-image {
+    flex: 0 0 auto;
+  }
+  &-content {
+    flex: 1 1 auto;
+  }
+}

site/src/common/helpers.less

@@ -100,6 +100,10 @@
     margin-left: 2rem !important;
     margin-right: 2rem !important;
   }
+  &-6 {
+    margin-left: 2.5rem !important;
+    margin-right: 2.5rem !important;
+  }
   &-auto {
     margin-right: auto !important;
     margin-left: auto !important;

site/src/common/reboot.less

@@ -14,10 +14,6 @@
 * {
   margin: 0;
   padding: 0;
-
-  &:focus-visible {
-    outline: 2px dashed @focus-color;
-  }
 }
 
 body {
@@ -147,3 +143,12 @@ audio {
     border: 1px solid rgba(0, 0, 0, 0.6);
   }
 }
+
+// Focus state
+*,
+a,
+button {
+  &:focus-visible {
+    outline: 2px dashed @focus-color;
+  }
+}

site/src/esl-popup/esl-d-popup-game.less

@@ -0,0 +1,35 @@
+esl-d-popup-game {
+  position: relative;
+  display: inline-block;
+
+  border: 1px solid #000;
+
+  min-height: 300px;
+  height: 95%;
+  width: 100%;
+
+  &::before, &::after {
+    position: absolute;
+    font-size: calc(min(100vh, 300px) / 3);
+    display: inline-block;
+    opacity: 0.3;
+  }
+
+  &::before {
+    content: '🌒';
+  }
+
+  &::after {
+    content: '🪐';
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.game-popup-trigger {
+  position: absolute;
+  padding: 2px 6px;
+  border-radius: 50%;
+  background-color: #bce0ff45;
+  font-size: 2rem;
+}