@knowark/componarkjs 1.7.3 → 1.7.5

package/lib/components/translate/components/translate.js

@@ -11,14 +11,14 @@ export class Translate extends Component {
 
     const dictionary = this.select('template')
     if (dictionary) {
-      const content = dictionary.content['textContent']
-      this.dictionary = JSON.parse(content) 
+      const content = dictionary.content.textContent
+      this.dictionary = JSON.parse(content)
     }
 
     return super.init(context)
   }
 
-  reflectedProperties() {
+  reflectedProperties () {
     return ['languages', 'endpoint', 'namespace', 'root']
   }
 
@@ -30,20 +30,20 @@ export class Translate extends Component {
     this.content = `
     <select listen on-change="onLanguageChanged">
       ${languages.map(code => `
-        <option value="${code}">${LANGUAGE_LIST[code]['name']}</option>
+        <option value="${code}">${LANGUAGE_LIST[code].name}</option>
       `)}
     </select>
     `
     return super.render()
   }
 
-  async onLanguageChanged(event) {
+  async onLanguageChanged (event) {
     event.stopPropagation()
     const language = event.target.value
     await this.transliterate({ language })
   }
 
-  async transliterate(options = {}) {
+  async transliterate (options = {}) {
     const language = options.language || 'es'
     const root = this.global.document.querySelector(
       options.root || this.root)
@@ -56,11 +56,11 @@ export class Translate extends Component {
     }
   }
 
-  parseKey(value) {
+  parseKey (value) {
     let key = value
     let namespace = this.namespace
 
-    const splitList  = value.split(':')
+    const splitList = value.split(':')
     if (splitList.length > 1) {
       namespace = splitList[0]
       key = splitList[1]
@@ -69,17 +69,17 @@ export class Translate extends Component {
     return { key, namespace }
   }
 
-  async resolveDictionary(language, namespace) {
-    let dictionary = ((this.dictionary[language]
-        || {})[namespace] || null)
+  async resolveDictionary (language, namespace) {
+    let dictionary = ((this.dictionary[language] ||
+        {})[namespace] || null)
 
     if (dictionary !== null) return dictionary
 
     if (!this.global.fetch) return {}
-    
+
     const url = `${this.endpoint}/${language}/${namespace}.json`
     const response = await this.global.fetch(url)
-    
+
     dictionary = await response.json()
 
     this.dictionary[language] || (this.dictionary[language] = {})
@@ -87,14 +87,12 @@ export class Translate extends Component {
 
     return dictionary
   }
-
 }
 Component.define(tag, Translate)
 
-
 const LANGUAGE_LIST = {
-  es: {name: 'Español'},
-  en: {name: 'English'},
-  fr: {name: 'Français'},
-  pt: {name: 'Português'}
+  es: { name: 'Español' },
+  en: { name: 'English' },
+  fr: { name: 'Français' },
+  pt: { name: 'Português' }
 }

package/lib/components/translate/components/translate.test.js

@@ -54,7 +54,7 @@ describe('Translate', () => {
     </ark-translate>
     `
     container.appendChild(translateContainer)
-    const translate = /** @type Translate **/  (
+    const translate = /** @type Translate **/ (
       translateContainer.querySelector('ark-translate'))
 
     await translate.transliterate()
@@ -111,7 +111,7 @@ describe('Translate', () => {
     const translate = /** @type Translate **/ (
       translateContainer.querySelector('ark-translate'))
 
-    let options = { language: 'en', }
+    let options = { language: 'en' }
     await translate.transliterate(options)
 
     const expectedRoot = document.createElement('div')
@@ -124,7 +124,6 @@ describe('Translate', () => {
     `
     expect(root).toEqual(expectedRoot)
 
-
     // Unknown Namespace:
 
     root.innerHTML = /* html */`
@@ -171,18 +170,17 @@ describe('Translate', () => {
     container.appendChild(translateContainer)
     const translate = /** @type Translate **/ (
       translateContainer.querySelector('ark-translate'))
-    const mockEvent = {
-      target: {value: 'en'}, stopPropagation: () => {}}
+    const mockEvent = { target: { value: 'en' }, stopPropagation: () => {} }
     let givenOptions = null
     translate.transliterate = async (options) => {
-      givenOptions = options }
+      givenOptions = options
+    }
 
     await translate.onLanguageChanged(mockEvent)
 
-    expect(givenOptions).toEqual({language: 'en'})
+    expect(givenOptions).toEqual({ language: 'en' })
   })
 
-
   it('fetches its translation files from the server', async () => {
     const root = document.createElement('div')
     root.innerHTML = /* html */`
@@ -203,15 +201,16 @@ describe('Translate', () => {
 
     const mockFetch = async (url) => ({
       json: async () => ({
-        "hello": "Hola",
-        "world": "Mundo",
-        "happy": "Feliz"
+        hello: 'Hola',
+        world: 'Mundo',
+        happy: 'Feliz'
       })
     })
-    translate.init({ global: {
-      fetch: mockFetch, document: document } })
+    translate.init({
+      global: { fetch: mockFetch, document }
+    })
 
-    await translate.transliterate({language: 'es'})
+    await translate.transliterate({ language: 'es' })
 
     const expectedRoot = document.createElement('div')
     expectedRoot.innerHTML = /* html */`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowark/componarkjs",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "author": "Knowark",
   "description": "Knowark's Web Components Library",
   "license": "ISC",

package/showcase/assets/knowark.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!-- Generator: Gravit.io --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="107 253.112 287.776 287.776" width="287.776pt" height="287.776pt"><g><circle vector-effect="non-scaling-stroke" cx="250.88815644671115" cy="396.9999999999993" r="143.88815644671132" fill="rgb(0,30,61)"/><g><path d=" M 344.921 390.854 C 339.37 405.032 325.062 415.132 308.305 415.132 L 191.334 415.132 C 191.334 415.132 191.334 415.132 191.334 415.132 L 191.334 415.132 L 188.972 415.132 L 188.972 415.065 C 173.514 414.182 160.463 404.697 154.998 391.551 C 159.372 391.471 163.739 391.112 168.077 390.471 C 178.473 388.939 188.727 386.562 198.738 383.364 C 206.917 380.753 214.969 377.739 222.854 374.332 C 232.397 370.206 241.789 365.744 251.013 360.948 C 259.668 365.92 268.591 370.398 277.749 374.366 C 286.53 378.158 295.562 381.364 304.769 383.95 C 313.366 386.369 322.122 388.203 330.97 389.45 C 335.601 390.098 340.254 390.572 344.921 390.854 Z  M 346.809 384.274 C 347.197 382.157 347.4 379.979 347.4 377.756 C 347.4 357.127 329.882 340.38 308.305 340.38 C 304.304 340.38 300.443 340.955 296.81 342.032 C 288.479 326.354 270.576 315.505 249.857 315.505 C 229.129 315.505 211.22 326.362 202.893 342.051 C 199.242 340.962 195.359 340.38 191.334 340.38 C 169.757 340.38 152.238 357.127 152.238 377.756 L 152.238 377.756 C 152.238 380.187 152.482 382.563 152.953 384.863 C 157.685 384.877 162.417 384.537 167.106 383.85 C 177.134 382.368 187.036 380.075 196.696 376.986 C 204.673 374.441 212.517 371.503 220.201 368.18 C 230.723 363.635 241.06 358.671 251.189 353.289 C 260.598 358.88 270.358 363.869 280.402 368.213 C 288.915 371.897 297.663 375.002 306.586 377.505 C 314.89 379.84 323.352 381.615 331.899 382.812 C 336.845 383.51 341.82 383.997 346.809 384.274 Z " fill-rule="evenodd" fill="rgb(0,255,255)"/><path d=" M 160.192 461.165 L 152.526 461.165 L 152.526 426.582 L 151.975 421.557 L 160.192 420.789 L 160.192 442.128 L 166.831 433.934 L 175.375 433.934 L 166.305 443.836 L 161.195 445.643 L 165.93 447.203 L 177.905 461.165 L 169.186 461.165 L 160.192 449.827 L 160.192 461.165 L 160.192 461.165 Z  M 180.085 434.108 L 188.252 433.291 L 188.252 437.969 L 190.507 434.231 L 190.507 434.231 Q 191.308 433.959 192.148 433.736 L 192.148 433.736 L 192.148 433.736 Q 192.987 433.513 193.864 433.513 L 193.864 433.513 L 193.864 433.513 Q 194.941 433.513 195.956 433.575 L 195.956 433.575 L 195.956 433.575 Q 196.97 433.637 197.897 433.872 L 197.897 433.872 L 197.897 433.872 Q 198.824 434.108 199.651 434.565 L 199.651 434.565 L 199.651 434.565 Q 200.478 435.023 201.204 435.816 L 201.204 435.816 L 201.204 435.816 Q 201.981 436.657 202.407 437.648 L 202.407 437.648 L 202.407 437.648 Q 202.833 438.638 203.021 439.616 L 203.021 439.616 L 203.021 439.616 Q 203.209 440.593 203.246 441.522 L 203.246 441.522 L 203.246 441.522 Q 203.284 442.45 203.284 443.168 L 203.284 443.168 L 203.284 461.165 L 195.116 461.165 L 195.116 442.425 L 195.116 442.425 Q 195.116 441.41 194.929 440.73 L 194.929 440.73 L 194.929 440.73 Q 194.741 440.049 194.415 439.64 L 194.415 439.64 L 194.415 439.64 Q 194.089 439.232 193.626 439.059 L 193.626 439.059 L 193.626 439.059 Q 193.162 438.885 192.611 438.885 L 192.611 438.885 L 192.611 438.885 Q 192.185 438.885 191.647 439.034 L 191.647 439.034 L 191.647 439.034 Q 191.108 439.182 190.532 439.442 L 190.532 439.442 L 190.532 439.442 Q 189.956 439.702 189.367 440.098 L 189.367 440.098 L 189.367 440.098 Q 188.778 440.494 188.252 440.965 L 188.252 440.965 L 188.252 461.165 L 180.085 461.165 L 180.085 434.108 L 180.085 434.108 Z  M 222.024 461.586 L 222.024 461.586 L 222.024 461.586 Q 219.017 461.586 216.537 460.509 L 216.537 460.509 L 216.537 460.509 Q 214.057 459.432 212.265 457.538 L 212.265 457.538 L 212.265 457.538 Q 210.474 455.645 209.484 453.07 L 209.484 453.07 L 209.484 453.07 Q 208.495 450.495 208.495 447.475 L 208.495 447.475 L 208.495 447.475 Q 208.495 444.48 209.447 441.918 L 209.447 441.918 L 209.447 441.918 Q 210.399 439.356 212.165 437.487 L 212.165 437.487 L 212.165 437.487 Q 213.931 435.618 216.424 434.565 L 216.424 434.565 L 216.424 434.565 Q 218.917 433.513 222.024 433.513 L 222.024 433.513 L 222.024 433.513 Q 225.03 433.513 227.523 434.565 L 227.523 434.565 L 227.523 434.565 Q 230.015 435.618 231.807 437.487 L 231.807 437.487 L 231.807 437.487 Q 233.598 439.356 234.588 441.918 L 234.588 441.918 L 234.588 441.918 Q 235.577 444.48 235.577 447.475 L 235.577 447.475 L 235.577 447.475 Q 235.577 450.495 234.625 453.07 L 234.625 453.07 L 234.625 453.07 Q 233.673 455.645 231.907 457.538 L 231.907 457.538 L 231.907 457.538 Q 230.141 459.432 227.635 460.509 L 227.635 460.509 L 227.635 460.509 Q 225.13 461.586 222.024 461.586 Z  M 227.41 448.094 L 227.41 448.094 L 227.41 448.094 Q 227.41 446.411 227.109 444.777 L 227.109 444.777 L 227.109 444.777 Q 226.809 443.143 226.145 441.844 L 226.145 441.844 L 226.145 441.844 Q 225.481 440.544 224.441 439.752 L 224.441 439.752 L 224.441 439.752 Q 223.401 438.96 221.923 438.96 L 221.923 438.96 L 221.923 438.96 Q 220.545 438.96 219.543 439.64 L 219.543 439.64 L 219.543 439.64 Q 218.541 440.321 217.902 441.46 L 217.902 441.46 L 217.902 441.46 Q 217.263 442.599 216.963 444.047 L 216.963 444.047 L 216.963 444.047 Q 216.662 445.495 216.662 447.03 L 216.662 447.03 L 216.662 447.03 Q 216.662 448.738 216.963 450.372 L 216.963 450.372 L 216.963 450.372 Q 217.263 452.006 217.927 453.28 L 217.927 453.28 L 217.927 453.28 Q 218.591 454.555 219.618 455.347 L 219.618 455.347 L 219.618 455.347 Q 220.646 456.14 222.099 456.14 L 222.099 456.14 L 222.099 456.14 Q 223.477 456.14 224.479 455.459 L 224.479 455.459 L 224.479 455.459 Q 225.481 454.778 226.132 453.639 L 226.132 453.639 L 226.132 453.639 Q 226.784 452.501 227.097 451.065 L 227.097 451.065 L 227.097 451.065 Q 227.41 449.629 227.41 448.094 Z  M 259.127 433.934 L 260.856 441.361 L 262.735 454.432 L 264.238 441.361 L 266.017 434.083 L 273.658 433.34 L 265.866 461.165 L 259.328 461.165 L 257.449 453.738 L 255.77 440.866 L 253.941 453.738 L 252.238 461.165 L 245.699 461.165 L 238.158 434.108 L 245.824 433.291 L 247.678 441.361 L 249.331 454.481 L 251.085 441.361 L 252.939 433.934 L 259.127 433.934 L 259.127 433.934 Z  M 298.335 456.09 L 298.912 461.165 L 290.419 461.165 L 290.419 457.155 L 287.412 461.462 L 287.412 461.462 Q 287.212 461.512 286.936 461.549 L 286.936 461.549 L 286.936 461.549 Q 286.661 461.586 286.134 461.586 L 286.134 461.586 L 286.134 461.586 Q 283.98 461.586 282.051 460.979 L 282.051 460.979 L 282.051 460.979 Q 280.122 460.373 278.669 459.197 L 278.669 459.197 L 278.669 459.197 Q 277.216 458.021 276.351 456.288 L 276.351 456.288 L 276.351 456.288 Q 275.487 454.555 275.487 452.303 L 275.487 452.303 L 275.487 452.303 Q 275.487 450.718 275.963 449.431 L 275.963 449.431 L 275.963 449.431 Q 276.439 448.144 277.278 447.129 L 277.278 447.129 L 277.278 447.129 Q 278.117 446.114 279.22 445.371 L 279.22 445.371 L 279.22 445.371 Q 280.322 444.628 281.587 444.146 L 281.587 444.146 L 281.587 444.146 Q 282.853 443.663 284.193 443.428 L 284.193 443.428 L 284.193 443.428 Q 285.533 443.193 286.811 443.193 L 286.811 443.193 L 286.811 443.193 Q 287.938 443.193 288.828 443.267 L 288.828 443.267 L 288.828 443.267 Q 289.717 443.341 290.394 443.465 L 290.394 443.465 L 290.394 443.465 Q 290.368 442.475 290.243 441.645 L 290.243 441.645 L 290.243 441.645 Q 290.118 440.816 289.792 440.197 L 289.792 440.197 L 289.792 440.197 Q 289.467 439.578 288.915 439.232 L 288.915 439.232 L 288.915 439.232 Q 288.364 438.885 287.512 438.885 L 287.512 438.885 L 287.512 438.885 Q 285.383 438.885 283.429 439.368 L 283.429 439.368 L 283.429 439.368 Q 281.475 439.851 279.896 440.42 L 279.896 440.42 L 277.291 435.84 L 277.291 435.84 Q 279.245 434.974 281.124 434.454 L 281.124 434.454 L 281.124 434.454 Q 282.326 434.108 283.967 433.81 L 283.967 433.81 L 283.967 433.81 Q 285.608 433.513 287.738 433.513 L 287.738 433.513 L 287.738 433.513 Q 290.995 433.513 293.062 434.293 L 293.062 434.293 L 293.062 434.293 Q 295.129 435.073 296.294 436.496 L 296.294 436.496 L 296.294 436.496 Q 297.458 437.92 297.897 439.913 L 297.897 439.913 L 297.897 439.913 Q 298.335 441.905 298.335 444.307 L 298.335 444.307 L 298.335 456.09 L 298.335 456.09 Z  M 290.419 453.986 L 290.419 448.416 L 290.419 448.416 Q 289.817 448.342 289.103 448.28 L 289.103 448.28 L 289.103 448.28 Q 288.389 448.218 287.738 448.218 L 287.738 448.218 L 287.738 448.218 Q 286.836 448.218 285.972 448.466 L 285.972 448.466 L 285.972 448.466 Q 285.107 448.713 284.431 449.208 L 284.431 449.208 L 284.431 449.208 Q 283.754 449.703 283.329 450.471 L 283.329 450.471 L 283.329 450.471 Q 282.903 451.238 282.903 452.278 L 282.903 452.278 L 282.903 452.278 Q 282.903 453.12 283.178 453.837 L 283.178 453.837 L 283.178 453.837 Q 283.454 454.555 283.905 455.088 L 283.905 455.088 L 283.905 455.088 Q 284.356 455.62 284.919 455.917 L 284.919 455.917 L 284.919 455.917 Q 285.483 456.214 286.059 456.214 L 286.059 456.214 L 286.059 456.214 Q 286.786 456.214 287.45 455.991 L 287.45 455.991 L 287.45 455.991 Q 288.114 455.768 288.677 455.434 L 288.677 455.434 L 288.677 455.434 Q 289.241 455.1 289.679 454.704 L 289.679 454.704 L 289.679 454.704 Q 290.118 454.308 290.419 453.986 L 290.419 453.986 L 290.419 453.986 Z  M 320.958 434.33 L 320.608 439.702 L 320.608 439.702 Q 320.107 439.455 319.706 439.294 L 319.706 439.294 L 319.706 439.294 Q 319.305 439.133 318.904 439.034 L 318.904 439.034 L 318.904 439.034 Q 318.503 438.935 318.065 438.91 L 318.065 438.91 L 318.065 438.91 Q 317.626 438.885 317.05 438.885 L 317.05 438.885 L 317.05 438.885 Q 316.349 438.885 315.635 439.219 L 315.635 439.219 L 315.635 439.219 Q 314.921 439.554 314.257 440.123 L 314.257 440.123 L 314.257 440.123 Q 313.593 440.692 313.042 441.423 L 313.042 441.423 L 313.042 441.423 Q 312.49 442.153 312.115 442.945 L 312.115 442.945 L 312.115 461.165 L 303.947 461.165 L 303.947 434.108 L 312.115 433.291 L 312.115 439.009 L 314.47 433.934 L 314.47 433.934 Q 314.87 433.786 315.609 433.65 L 315.609 433.65 L 315.609 433.65 Q 316.349 433.513 317 433.513 L 317 433.513 L 317 433.513 Q 318.378 433.513 319.267 433.724 L 319.267 433.724 L 319.267 433.724 Q 320.157 433.934 320.958 434.33 L 320.958 434.33 L 320.958 434.33 Z  M 331.806 461.165 L 324.14 461.165 L 324.14 426.582 L 323.589 421.557 L 331.806 420.789 L 331.806 442.128 L 338.445 433.934 L 346.989 433.934 L 337.919 443.836 L 332.808 445.643 L 337.544 447.203 L 349.519 461.165 L 340.8 461.165 L 331.806 449.827 L 331.806 461.165 L 331.806 461.165 Z " fill="rgb(0,255,255)"/></g></g></svg>

package/showcase/{design/screens/base/audio/audioDemo.js → components/demos/audio.js}

@@ -1,18 +1,14 @@
-import { Component } from 'base/component/index.js'
+import { Component } from '@knowark/componarkjs'
 
 export class AudioDemo extends Component {
-  init (context) {
-    return super.init(context)
-  }
-
   render () {
+    this.style.cssText = '--padding:4; --margin:2;'
     this.content = /* html */ `
       <ark-audio></ark-audio>
 
-      <a 
-        target="_blank"
-        href="https://github.com/knowark/componark/blob/master/lib/components/audio/README.md">
-      * Reference
+      <a target="_blank"
+         href="https://github.com/knowark/componark/blob/master/lib/components/audio/README.md">
+        * Reference
       </a>
     `
     return super.render()
@@ -28,5 +24,5 @@ const styles = `
     margin: 1rem;
   }
 `
- 
+
 Component.define('demo-audio', AudioDemo, styles)

package/showcase/{design/screens/base/camera/cameraDemo.js → components/demos/camera.js}

@@ -1,4 +1,4 @@
-import { Component } from 'base/component/index.js'
+import { Component } from '@knowark/componarkjs'
 
 const tag = 'demo-camera'
 export class CameraDemo extends Component {
@@ -24,25 +24,25 @@ export class CameraDemo extends Component {
       </a>
     `
 
-    this.camera['start']()
+    this.camera.start()
 
     return super.render()
   }
 
   disconnectedCallback () {
-    this.camera['stop']()
+    this.camera.stop()
   }
 
   takepicture () {
-    this.photo.setAttribute('src', this.camera['dataURL'](200, 200))
+    this.photo.setAttribute('src', this.camera.dataURL(200, 200))
   }
 
   startCamera () {
-    this.camera['start']()
+    this.camera.start()
   }
 
   stopCamera () {
-    this.camera['stop']()
+    this.camera.stop()
   }
 
   get camera () {
@@ -53,7 +53,6 @@ export class CameraDemo extends Component {
   get photo () {
     return this.querySelector('[data-photo]')
   }
-
 }
 
 const styles = /* css */`

package/showcase/{design/screens/base/droparea/dropareaDemo.js → components/demos/droparea.js}

@@ -1,12 +1,12 @@
-import { Component } from 'base/component/index.js'
+import { Component } from '@knowark/componarkjs'
 
 const tag = 'demo-droparea'
 export class DropareaDemo extends Component {
-  init(context) {
+  init (context) {
     return super.init(context)
   }
 
-  render() {
+  render () {
     this.innerHTML = /* html */ `
       <h1 class="title">
         This is a drop area
@@ -38,7 +38,7 @@ export class DropareaDemo extends Component {
     return super.render()
   }
 
-  async load() {
+  async load () {
     const myUrl =
       'https://images.unsplash.com/photo-1530281700549-e82e7bf110d6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1888&q=80'
 
@@ -46,15 +46,15 @@ export class DropareaDemo extends Component {
     this.select('ark-droparea[data-load]').update({ contextFiles: [myFile] })
   }
 
-  async getFileFromUrl(url, name, defaultType = 'image/jpeg') {
+  async getFileFromUrl (url, name, defaultType = 'image/jpeg') {
     const response = await fetch(url)
     const data = await response.blob()
     return new File([data], name, {
-      type: response.headers.get('content-type') || defaultType,
+      type: response.headers.get('content-type') || defaultType
     })
   }
 
-  async onFileList(event) {
+  async onFileList (event) {
     const element = this.querySelector('[data-file-multi]')
     const droparea = this.select('.ark-droparea')
     const urlList = []

package/showcase/{design/screens/base/list/listDemo.js → components/demos/list.js}

@@ -1,4 +1,4 @@
-import { Component } from 'base/component/index.js'
+import { Component } from '@knowark/componarkjs'
 
 const tag = 'demo-list'
 export class ListDemo extends Component {
@@ -60,7 +60,7 @@ export class ListDemo extends Component {
     templateList
       .init({
         source: sourceTemplate,
-        template: template
+        template
       })
       .render()
 
@@ -85,5 +85,4 @@ const styles = /* css */`
   }
 `
 
-
 Component.define(tag, ListDemo, styles)

package/showcase/{design/screens/base/paginator/paginatorDemo.js → components/demos/paginator.js}

@@ -1,15 +1,15 @@
-import { Component } from 'base/component/index.js'
+import { Component } from '@knowark/componarkjs'
 
 const tag = 'demo-paginator'
 export class PaginatorDemo extends Component {
-  init(context = {}) {
+  init (context = {}) {
     this.limit = 1
     this.offset = 0
     this.page = 1
     return super.init(context)
   }
 
-  render() {
+  render () {
     this.content = /* html */ `
       <ark-list background="light" color="dark"></ark-list>
       <ark-paginator listen on-page-changed="onPageChanged" 
@@ -25,7 +25,7 @@ export class PaginatorDemo extends Component {
     return super.render()
   }
 
-  async load() {
+  async load () {
     const template = (item) => /* html */ `
     <h1>${item.year}</h1>
     <span data-first>FIRST: ${item.first}</span>
@@ -43,7 +43,7 @@ export class PaginatorDemo extends Component {
     this.select('ark-list')
       .init({
         source: source(),
-        template: template,
+        template
       })
       .render()
 
@@ -51,14 +51,14 @@ export class PaginatorDemo extends Component {
     paginator
       .init({
         collectionSize: this.list.length,
-        currentPage: this.page,
+        currentPage: this.page
       })
       .render()
     return super.load()
   }
 
   /** @param {CustomEvent} event */
-  async onPageChanged(event) {
+  async onPageChanged (event) {
     event.stopPropagation()
     this.limit = event.detail.limit
     this.offset = event.detail.offset
@@ -66,7 +66,7 @@ export class PaginatorDemo extends Component {
     await this.update()
   }
 
-  get list() {
+  get list () {
     return [
       { first: 'Colombia', second: 'Argentina', year: 2016 },
       { first: 'Uruguay', second: 'Colombia', year: 2017 },
@@ -75,7 +75,7 @@ export class PaginatorDemo extends Component {
       { first: 'Argentina', second: 'Argentina', year: 2020 },
       { first: 'Chile', second: 'Colombia', year: 2021 },
       { first: 'Colombia', second: 'Argentina', year: 2022 },
-      { first: 'Uruguay', second: 'Bolivia', year: 2023 },
+      { first: 'Uruguay', second: 'Bolivia', year: 2023 }
     ]
   }
 }

package/showcase/{design/screens/base/splitview/splitViewDemo.js → components/demos/splitview.js}

@@ -1,8 +1,6 @@
-import { Component } from 'base/component/index.js'
-import './detailDemo.js'
-
-const tag = 'demo-splitview'
+import { Component } from '@knowark/componarkjs'
 
+let tag = 'demo-splitview'
 export class SplitViewDemo extends Component {
   render () {
     this.content = /* html */ `
@@ -31,7 +29,6 @@ export class SplitViewDemo extends Component {
     return super.render()
   }
 
-
   initList () {
     const template = item => /* html */ `
       <h1>${item.year}</h1>
@@ -48,11 +45,47 @@ export class SplitViewDemo extends Component {
     ]
 
     this.select('[data-list]').init({
-      source: source,
-      template: template
+      source,
+      template
     }).render()
-
   }
 }
-
 Component.define(tag, SplitViewDemo)
+
+tag = 'demo-splitview-detail'
+export class SplitviewDetailDemo extends Component {
+  init (context = {}) {
+    if (!context.data) return super.init()
+
+    const data = context.data
+    this.first = data.first
+    this.second = data.second
+    this.year = data.year
+    return super.init()
+  }
+
+  render () {
+    this.content = this.first
+      ? /* html */ `
+      <button listen on-click="onClick"
+        style="margin:8px; --display-large:none;"
+        >Close</button>
+        <h1>${this.year}</h1>
+        <p>
+          <span data-first>FIRST: ${this.first}</span>
+          <span> | </span>
+          <span data-second>SECOND: ${this.second}</span>
+        </p>
+      `
+      : /* html */ `
+        <h1>Ark Detail Example</h1>
+      `
+    return super.render()
+  }
+
+  onClick (event) {
+    event.stopPropagation()
+    this.emit('close')
+  }
+}
+Component.define(tag, SplitviewDetailDemo)

package/showcase/{design/screens/base/translate/translateDemo.js → components/demos/translate.js}

@@ -1,9 +1,9 @@
-import { Component } from "base/component/index.js"
+import { Component } from '@knowark/componarkjs'
 
-const tag = "demo-translate"
+const tag = 'demo-translate'
 export class TranslateDemo extends Component {
-  render() {
-    const context = JSON.stringify({name: 'Esteban'})
+  render () {
+    const context = JSON.stringify({ name: 'Esteban' })
     this.content = /* html */ `
 
     <section class="translate-demo_container">
@@ -29,7 +29,6 @@ export class TranslateDemo extends Component {
 
     return super.render()
   }
-
 }
 const styles = /* css */ `
 

package/showcase/components/index.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Componark - Components</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet"href="https://unpkg.com/@knowark/styleark@0.6.1/dist/styles.min.css">
+    <script type="importmap">
+    {
+      "imports": {
+        "@knowark/componarkjs": "https://unpkg.com/@knowark/componarkjs@1.7.3/lib/index.js"
+      }
+    }
+    </script>
+    <style>
+      :root {
+        --secondary: #00ffff;
+        --primary: #001e3d;
+        font-family: "Roboto";
+      }
+
+      html, body {
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <app-root style="height:100%;;"></app-root>
+    <script type="module">
+      import { Component, html } from '@knowark/componarkjs'
+
+      const tag = 'app-root'
+      class RootComponent extends Component {
+        render () {
+          this.content = html`
+          <nav style="background:var(--primary); --padding:4; --height:4">
+            <a href="/" style="text-decoration:none; color:white">COMPONARK</a>
+          </nav>
+          <main style="height:calc(100% - (var(--height-step) * 4));
+          --grid: auto-flow / 1fr 5fr">
+            <aside id="menu" style="--flow:row; overflow:auto"
+              listen on-click="onMenuItem">
+              ${[
+                { component: 'audio' },
+                { component: 'camera' },
+                //{ component: 'capture' },
+                //{ component: 'droparea' },
+                //{ component: 'emit' },
+                { component: 'list' },
+                { component: 'paginator' },
+                { component: 'splitview' },
+                { component: 'translate' },
+              ].map(item => html`
+              <button style="height:100%; width:100%; font-weight:bold;
+              text-align:center; text-transform:capitalize; cursor:pointer;
+              --all:unset; --background-hover:var(--primary);
+              --color-hover:var(--light);">
+                ${item.component}
+              </button>
+              `).join('\n')}
+            </aside>
+            <article id="content" style="background:var(--muted); --padding:4">
+            </article>
+          </main>
+          `
+          return super.render()
+        }
+
+        async onMenuItem (event) {
+          const component = event.target.textContent.trim()
+          const file = `./demos/${component}.js`
+          const module = await import(file)
+          this.querySelector('#content').innerHTML = `
+            <demo-${component}></demo-${component}>
+          `
+        }
+      }
+      Component.define(tag, RootComponent)
+    </script>
+  </body>
+</html>