@knowark/componarkjs 1.7.3 → 1.7.4

package/Makefile

@@ -1,4 +1,4 @@
-.PHONY: all tests coverage
+.PHONY: all tests coverage showcase
 
 setup:
 	npm install -g browser-sync && \
@@ -16,7 +16,7 @@ clean:
 	rm -rf ./dist
 
 showcase:
-	npx live-server ./showcase/
+	npx live-server ./showcase
 
 dev:
 	npm run dev
@@ -28,7 +28,7 @@ push:
 	git push && git push --tags
 
 deploy:
-	sshpass -e rsync -av --delete ./dist/ \
+	sshpass -e rsync -av --delete ./showcase/ \
 		${RSYNC_USER}@${RSYNC_HOST}:${RSYNC_DIR}
 
 reset:

package/lib/base/styles/styles.js

@@ -46,7 +46,8 @@ html {
 
   /* TYPOGRAPHY */
 
-  --font-size-step: 0.25rem;
+  --font-size-base: 0.5rem;
+  --font-size-step: 0.125rem;
   --line-height-step: 0.5;
   --word-spacing-step: 0.1rem;
   --letter-spacing-step: 0.05rem;
@@ -102,7 +103,8 @@ ${actions.map(action => css`
 /* TYPOGRAPHY */
 
 [style*='--font-size:'] {
-  font-size: calc(var(--font-size-step) * var(--font-size));
+  font-size: calc(var(--font-size-base) + (
+    var(--font-size-step) * var(--font-size)));
 }
 [style*='--line-height:'] {
   line-height: calc(var(--line-height-step) * var(--line-height));
@@ -114,6 +116,18 @@ ${actions.map(action => css`
   letter-spacing: calc(var(--letter-spacing-step) * var(--letter-spacing));
 }
 
+[style*='--text-overflow:'] {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: var(--text-overflow);
+}
+[style*='--overflow:'] {
+  overflow: var(--overflow);
+}
+[style*='--white-space:'] {
+  white-space: var(--white-space);
+}
+
 /* SPACING */
 
 ${sides.map(side => css`
@@ -277,7 +291,22 @@ ${[...mutableProperties, ...effects].map(
   [style*='--display-large:'] {
     display: var(--display-large);
   }
-}                                       
+}
+
+/* PSEUDO-ELEMENTS */
+
+${actions.map(action => css`
+[style*='--content-before${action}:']${action.replace('-', ':')}::before {
+  content: var(--content-before${action});
+}
+[style*='--content-after${action}:']${action.replace('-', ':')}::after {
+  content: var(--content-after${action});
+}
+[style*='--background-backdrop${action}:']${action.replace(
+  '-', ':')}::backdrop {
+  background: var(--background-backdrop${action});
+}
+`.trim()).join('\n')}
 
 /* ANIMATIONS */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowark/componarkjs",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "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()

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 {

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

@@ -1,4 +1,4 @@
-import { Component } from 'base/component/index.js'
+import { Component } from '@knowark/componarkjs'
 
 const tag = 'demo-droparea'
 export class DropareaDemo extends Component {

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 {

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

@@ -1,4 +1,4 @@
-import { Component } from 'base/component/index.js'
+import { Component } from '@knowark/componarkjs'
 
 const tag = 'demo-paginator'
 export class PaginatorDemo extends Component {

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 */ `
@@ -54,5 +52,42 @@ export class SplitViewDemo extends Component {
 
   }
 }
-
 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,4 +1,4 @@
-import { Component } from "base/component/index.js"
+import { Component } from '@knowark/componarkjs'
 
 const tag = "demo-translate"
 export class TranslateDemo extends Component {

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>

package/showcase/index.html

@@ -1,86 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
-  <title></title>
-</head>
-<style>
-  * {
-    box-sizing: border-box;
-    margin: 0;
-  }
-
-  html {
-    height: 100%;
-  }
-
-  body {
-    display: grid;
-    align-items: center;
-    justify-items: center;
-    color: #001e3d;
-    font-family: "Roboto","Helvetica","Arial",sans-serif;
-    min-height: 100%;
-  }
-
-  .titles {
-    display: flex;
-    gap: 0.8rem;
-  }
-
-  #version {
-    align-self: center;
-    font-weight: 300;
-    font-size: 0.9rem;
-  }
-
-  .themes {
-    padding: 0;
-    display: flex;
-    gap: 1rem;
-    flex-direction: column;
-    align-self: center;
-    text-align: center;
-    list-style-type: none;
-  }
-
-  .theme__link {
-    user-select: none;
-    padding: 1rem;
-    background: #001e3d;
-    color: #00ffff;
-    border-radius: 5px;
-    text-decoration: none;
-    font-weight: bold;
-    transition: all 0.2s ease-in-out;
-  }
-
-  .theme__link:hover {
-    background: #00ffff;
-    color: #001e3d;
-  }
-</style>
-
-<body>
-  <main>
-    <div class="titles">
-      <img src="../showcase/logo-knowark.svg" alt="" class="brand">
-      <h1>Componark</h1>
-      <h2 id="version"></h2>
-    </div>
-    <ul class="themes">
-      <a class="theme__link" href="/ark/base/accordion">
-        <li> ARK </li>
-      </a>
-    </ul>
-  </main>
-</body>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <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">
+    <title>Componark</title>
+  </head>
+  <style>
+    :root {
+      --secondary: #00ffff;
+      --primary: #001e3d;
+      font-family: "Roboto";
+    }
+
+    html, body {
+      height: 100%;
+    }
+  </style>
+
+  <body>
+    <main style="display:grid; grid: 1fr 2fr / auto-flow;
+    justify-items:center; height:100%; --padding:8">
+      <section id="title" style="--margin-top:12">
+        <h1 style="text-align:center; --margin-bottom:8">Componark</h1>
+        <img style="display:block; --width:15;" src="./assets/knowark.svg">
+      </section>
+      <section id="entries" style="display:grid; place-items:center;
+        --padding-vertical:12">
+        <div style="width:100%;">
+          <a style="display:block; background:var(--primary);
+          color:var(--secondary); text-decoration:none; text-align:center;
+          border-radius:5px; --padding:2;" href="/components">
+            Components
+          </a>
+        </div>
+      </section>
+    </main>
+  </body>
 
 </html>

package/showcase/design/core/factories/development/development.factory.js

@@ -1,5 +0,0 @@
-import { StandardFactory, standardStrategy } from '../standard.factory.js'
-
-export class DevelopmentFactory extends StandardFactory { }
-
-export const developmentStrategy = Object.assign({}, standardStrategy, {})

package/showcase/design/core/factories/development/index.js

@@ -1 +0,0 @@
-export * from './development.factory.js'

package/showcase/design/core/factories/index.js

@@ -1,11 +0,0 @@
-import { 
-  DevelopmentFactory, developmentStrategy 
-} from './development/index.js'
-
-/** @param {string} target */
-export function buildInjector (target) {
-  return {
-    strategy: developmentStrategy,
-    factory: new DevelopmentFactory()
-  }
-}

package/showcase/design/core/factories/standard.factory.js

@@ -1,19 +0,0 @@
-import { Routark } from '@knowark/routarkjs'
-
-export class StandardFactory {
-  /** @param {string} method */
-  extract (method) {
-    return this[`_${method}`]
-  }
-
-  _router () {
-    const design = process.env.ARK_DESIGN
-    return new Routark(window, `/${design}/`)
-  }
-}
-
-export const standardStrategy = {
-  Router: {
-    method: 'router'
-  }
-}

package/showcase/design/index.html

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,
-      initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <title>Componark</title>
-  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
-  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
-    integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
-    crossorigin="anonymous" />
-  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700&display=swap" rel="stylesheet">
-
-</head>
-
-<body>
-  <main></main>
-</body>
-
-</html>

package/showcase/design/index.js

@@ -1,7 +0,0 @@
-import { main } from './screens/main.js'
-
-// @ts-ignore
-// eslint-disable-next-line no-undef
-const target = TARGET
-
-main(target)

package/showcase/design/screens/base/audio/index.js

@@ -1,25 +0,0 @@
-import { AudioDemo } from './audioDemo.js'
-
-export function hub (parentResolver) {
-  const resolver = parentResolver.forge({
-    strategy: {
-      AudioDemo: {
-        method: 'component'
-      }
-    },
-    factory: new ComponentFactory()
-  })
-
-  return resolver.resolve('AudioDemo')
-}
-
-export class ComponentFactory {
-  /** @param {string} method */
-  extract (method) {
-    return this[`_${method}`]
-  }
-
-  _component () {
-    return new AudioDemo()
-  }
-}

package/showcase/design/screens/base/camera/index.js

@@ -1,25 +0,0 @@
-import { CameraDemo } from './cameraDemo.js'
-
-export function hub (parentResolver) {
-  const resolver = parentResolver.forge({
-    strategy: {
-      CameraDemo: {
-        method: 'component'
-      }
-    },
-    factory: new ComponentFactory()
-  })
-
-  return resolver.resolve('CameraDemo')
-}
-
-export class ComponentFactory {
-  /** @param {string} method */
-  extract (method) {
-    return this[`_${method}`]
-  }
-
-  _component () {
-    return new CameraDemo()
-  }
-}

package/showcase/design/screens/base/droparea/index.js

@@ -1,25 +0,0 @@
-import { DropareaDemo } from "./dropareaDemo.js"
-
-export function hub(parentResolver) {
-  const resolver = parentResolver.forge({
-    strategy: {
-      DropareaDemo: {
-        method: "component",
-      },
-    },
-    factory: new ComponentFactory(),
-  })
-
-  return resolver.resolve("DropareaDemo")
-}
-
-export class ComponentFactory {
-  /** @param {string} method */
-  extract(method) {
-    return this[`_${method}`]
-  }
-
-  _component() {
-    return new DropareaDemo()
-  }
-}

package/showcase/design/screens/base/index.js

@@ -1,42 +0,0 @@
-/** @typedef {import('./root.component').RootComponent} RootComponent */
-import './root.component.js'
-import { setRoutes } from './root.routes.js'
-
-export function hub (parentResolver, prefix) {
-  const resolver = parentResolver.forge({
-    strategy: {
-      RootComponent: {
-        method: 'rootComponent'
-      }
-    },
-    factory: new RootFactory(prefix)
-  })
-
-  const rootComponent = resolver.resolve('RootComponent')
-  setRoutes(resolver, rootComponent, prefix)
-
-  return rootComponent
-}
-
-export class RootFactory {
-  /** @param {string} prefix */
-  constructor (prefix) {
-    RootFactory.prefix = prefix
-    // @ts-ignore
-    this._rootComponent.prefix = prefix
-    // @ts-ignore
-    this._rootComponent.dependencies = []
-  }
-
-  /** @param {string} method */
-  extract (method) {
-    return this[`_${method}`]
-  }
-
-  _rootComponent () {
-    const rootComponent = /** @type {RootComponent} */
-      (document.createElement('app-root'))
-    return rootComponent.init({ path: RootFactory.prefix })
-  }
-}
-RootFactory.prefix = undefined

package/showcase/design/screens/base/list/index.js

@@ -1,25 +0,0 @@
-import { ListDemo } from './listDemo.js'
-
-export function hub (parentResolver) {
-  const resolver = parentResolver.forge({
-    strategy: {
-      ListDemo: {
-        method: 'component'
-      }
-    },
-    factory: new ComponentFactory()
-  })
-
-  return resolver.resolve('ListDemo')
-}
-
-export class ComponentFactory {
-  /** @param {string} method */
-  extract (method) {
-    return this[`_${method}`]
-  }
-
-  _component () {
-    return new ListDemo()
-  }
-}

package/showcase/design/screens/base/paginator/index.js

@@ -1,25 +0,0 @@
-import { PaginatorDemo } from './paginatorDemo.js'
-
-export function hub (parentResolver) {
-  const resolver = parentResolver.forge({
-    strategy: {
-      PaginatorDemo: {
-        method: 'component'
-      }
-    },
-    factory: new ComponentFactory()
-  })
-
-  return resolver.resolve('PaginatorDemo')
-}
-
-export class ComponentFactory {
-  /** @param {string} method */
-  extract (method) {
-    return this[`_${method}`]
-  }
-
-  _component () {
-    return new PaginatorDemo()
-  }
-}

package/showcase/design/screens/base/root.component.js

@@ -1,294 +0,0 @@
-import { Component } from 'base/component'
-
-// @ts-ignore
-// eslint-disable-next-line no-undef
-export const version = VERSION
-
-const design = process.env.ARK_DESIGN
-
-const tag = 'app-root'
-export class RootComponent extends Component {
-  render() {
-    this.content = /* html */ `
-    <nav class="app-root__navbar">
-      <div class="app-root__menu">
-        <span class="material-icons">
-          list
-        </span>
-      </div>
-      <div class="app-root__brand">
-        <a  href="/">
-          <h1 class="app-root__title">COMPONARK</h1>
-          <p class="app-root__subtitle">web components</p>
-        </a>
-      </div>
-      <div class="app-root__actions"> 
-        <a class="app-root__navitem" href="#">style ${design.toUpperCase()}</a>
-      </div>  
-    </nav>
-    
-    <aside class="app-root__sidebar"> 
-      <div class="${tag}__sidebar-content">
-      ${this.locations
-          .map(
-            (location) => `
-        <a class="app-root__sideitem" href="/${design}${location.path}">
-          ${location.name}
-        </a>
-        `
-          )
-          .join('')}
-      </div>
-    </aside>
-
-    <section class="app-root__content" data-content></section>
-
-    `
-    this.showMenu()
-    return super.render()
-  }
-
-  /** @param {Component} component */
-  setContentComponent(component) {
-    if (!component) return
-    const container = this.select('[data-content]')
-
-    container.firstChild?.remove()
-    container.append(component)
-    component.render().load()
-  }
-
-  /** @param {CustomEvent} event */
-  selectEventListener(event) {
-    event.stopImmediatePropagation()
-    const style = event.detail.value
-  }
-
-  /** @param {CustomEvent} event */
-  onListItemSelected(event) {
-    this.dispatchEvent(
-      new CustomEvent('navigate', {
-        bubbles: true,
-        detail: { path: event.detail.data.path },
-      })
-    )
-  }
-
-  showMenu() {
-    this.querySelector('.app-root__menu').addEventListener('click', () => {
-      this.querySelector('.app-root__sidebar').style.display = 'grid'
-    })
-  }
-
-  get locations() {
-    return [
-      { name: 'Audio', path: '/base/audio' },
-      { name: 'Camera', path: '/base/camera' },
-      { name: 'Droparea', path: '/base/droparea' },
-      { name: 'List', path: '/base/list' },
-      { name: 'Paginator', path: '/base/paginator' },
-      { name: 'Spinner', path: '/base/spinner' },
-      { name: 'SplitView', path: '/base/splitview' },
-      { name: 'Translate', path: '/base/translate' },
-    ]
-  }
-}
-
-const styles = /* css */ `
-
-html {
-  height: 100%;
-  height: -webkit-fill-available;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  background-color: #eff3f8;
-  height: 100%;
-}
-
-:root {
-  /*
-  --primary: #1976d2;
-  --secondary: orange;
-  --success: green;
-  --danger: red;
-  --warning: yellow;
-  --info: cyan;
-  --dark: black;
-  --muted: gray;
-  --light: lightgray;
-  */
-  --xs: 0.3rem;
-  --sm: 0.8rem;
-  --md: 1rem;
-  --lg: 2rem;
-  --xl: 3rem;
-}
-
-.${tag} {
-  display: grid;
-  height: 100%;
-  grid-template-rows: 0.05fr 1fr;
-  font-family: "Roboto","Helvetica","Arial",sans-serif;
-  letter-spacing: 0.02em;
-}
-
-.${tag}__navbar {
-  grid-column: 1 / 13;
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  background-color: rgb(0 30 61);
-  color: #00ffff;
-  text-decoration: none
-  overflow: hidden;
-  border-bottom:4px solid rgb(160 255 255 / 53%);
-  box-shadow: 0px 0px 4px rgba(0,0,0,.6);
-}
-
-.${tag} .material-icons {
-  font-size: 2.5rem;
-}
-
-.${tag}__navitem {
-  text-decoration: none;
-  padding: 2vw;
-  color: cyan;
-  height:auto;
-}
-
-.${tag}__sideitems {
-  display: flex;
-  flex-direction: column;
-}
-
-.${tag}__navitem,
-.${tag}__sideitem {
-  transition: background 0.1s ease;
-}
-
-.${tag}__navitem:hover,
-.${tag}__sideitem:hover {
-  background-color: rgb(38 54 70);
-  color: cyan;
-}
-.${tag}__navitem:active,
-.${tag}__sideitem:active {
-  background-color: rgb(239, 243, 248);
-  color: cyan;
-}
-.${tag}__navitem:hover, .app-root__sideitem:hover {
-  background-color: rgb(131 170 209);
-    color: rgb(0 1 2);
-    font-weight: bold;
-}
-
-.${tag}__brand {
-  display: grid;
-  align-items: center;
-  padding: 0 1rem;
-  height: 100%;
-  width: fit-content;
-  justify-self: start;
-}
-
-.${tag}__brand a {
-  text-decoration: none;
-  text-align: center;
-  margin: 0;
-  color: white;
-  transition: .1s;
-}
-
-.${tag}__brand:hover a {
-  color: rgb(0, 255, 255);
-  transition: .1s;
-}
-
-
-.${tag}__actions {
-  display: grid;
-  grid-auto-flow: column;
-  align-items: center;
-  justify-items: center;
-  grid-column: 6;
-}
-
-.${tag}__title {
-  all: inherit;
-  font-weight: 700;
-  font-size: 1.3rem;
-}
-
-.${tag}__subtitle {
-  all: inherit;
-  font-size:0.9rem;
-  font-weight: 300;
-  text-align:center;
-}
-
-.${tag}__sidebar {
-  display: grid;
-  height: 100%;
-  width: 240px;
-  grid-row: 2 / -1;
-  background-color: #001e3d;
-  color: #00ffff;
-  text-decoration: none;
-  overflow-x: hidden;
-}
-
-.${tag}__sidebar-content {
-  display: inherit;
-}
-
-.${tag}__navbar-brand {
-  display: none;
-}
-
-.${tag}__sideitem {
-  text-decoration: none;
-  padding: 1vw;
-  color: rgb(160 255 255);
-  border-bottom: 1px solid #8080801c;
-}
-
-.${tag}__menu {
-  display: none;
-  text-align:center;
-  user-select: none;
-  cursor: pointer;
-}
-
-.${tag}__content {
-  grid-area: 2 / 2 / auto / 13;
-  padding: 2vmin;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-@media only screen and (max-width: 800px) {
-  .${tag}__sidebar {
-    display: none;
-    position: absolute;
-    z-index: 1000;
-    width: 150px;
-  }
-
-  .${tag}__menu {
-    display: grid;
-  }
-
-  .${tag}__content {
-    grid-area: 2 / 1 / auto / 13;
-  }
-
-  .${tag}__brand {
-    grid-column: 3 / 5;
-    justify-self: center;
-  }
-
-}
-`
-Component.define(tag, RootComponent, styles)

package/showcase/design/screens/base/root.routes.js

@@ -1,28 +0,0 @@
-export function setRoutes(resolver, rootComponent, prefix) {
-  /** @param {string} path @returns {{ path: string, action: function }} */
-  function getComponentRoute(path, dependencies = []) {
-    return {
-      path: path,
-      action: async () => {
-        for (const dependency of dependencies) {
-          await import(`components/${dependency}/index.js`)
-        }
-        await import(`components/${path}/index.js`)
-        const module = await import(`./${path}/index.js`)
-        rootComponent.setContentComponent(module.hub(resolver))
-      },
-    }
-  }
-
-  const router = resolver.resolve('Router')
-  router.addRoutes(prefix, [
-    getComponentRoute('audio'),
-    getComponentRoute('camera'),
-    getComponentRoute('droparea'),
-    getComponentRoute('list'),
-    getComponentRoute('paginator', ['list']),
-    getComponentRoute('spinner'),
-    getComponentRoute('splitview', ['list']),
-    getComponentRoute('translate'),
-  ])
-}

package/showcase/design/screens/base/spinner/index.js

@@ -1,25 +0,0 @@
-import { SpinnerDemo } from './spinnerDemo.js'
-
-export function hub (parentResolver) {
-  const resolver = parentResolver.forge({
-    strategy: {
-      SpinnerDemo: {
-        method: 'component'
-      }
-    },
-    factory: new ComponentFactory()
-  })
-
-  return resolver.resolve('SpinnerDemo')
-}
-
-export class ComponentFactory {
-  /** @param {string} method */
-  extract (method) {
-    return this[`_${method}`]
-  }
-
-  _component () {
-    return new SpinnerDemo()
-  }
-}

package/showcase/design/screens/base/spinner/spinnerDemo.js

@@ -1,55 +0,0 @@
-import { Component } from 'base/component/index.js'
-
-const tag = 'demo-spinner'
-export class SpinnerDemo extends Component {
-  init(context) {
-    return super.init()
-  }
-
-  render() {
-    this.content = /* html */ `
-      <h1>spinner</h1>
-
-      <div class="spinner-container">
-        <div>
-          <ark-spinner></ark-spinner>
-          <p style="margin-top:16px">circle</p>
-        </div>
-        <div>
-          <ark-spinner scale="1.5" type="chase"></ark-spinner>
-          <p style="margin-top:16px">chase</p>
-        </div>
-        <div>
-          <ark-spinner type="rect"></ark-spinner>
-          <p style="margin-top:16px">rect</p>
-        </div>
-        <div>
-          <ark-spinner type="bounce"></ark-spinner>
-          <p style="margin-top:16px">bounce</p>
-        </div>
-        <div>
-          <ark-spinner type="loader"></ark-spinner>
-          <p style="margin-top:16px">loader</p>
-        </div>
-      </div>
-
-      <a 
-        target="_blank" href="https://github.com/knowark/componark/blob/master/lib/components/spinner/README.md">
-      * Reference
-      </a>
-    `
-    return super.render()
-  }
-}
-
-const styles = /* css */`
-.spinner-container{
-  display: flex;
-  gap:1.5rem;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-}
-`
-Component.define(tag, SpinnerDemo, styles)

package/showcase/design/screens/base/splitview/detailDemo.js

@@ -1,40 +0,0 @@
-import { Component } from "base/component/index.js"
-
-const 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/splitview/index.js

@@ -1,25 +0,0 @@
-import { SplitViewDemo } from './splitViewDemo.js'
-
-export function hub (parentResolver) {
-  const resolver = parentResolver.forge({
-    strategy: {
-      SplitViewDemo: {
-        method: 'component'
-      }
-    },
-    factory: new ComponentFactory()
-  })
-
-  return resolver.resolve('SplitViewDemo')
-}
-
-export class ComponentFactory {
-  /** @param {string} method */
-  extract (method) {
-    return this[`_${method}`]
-  }
-
-  _component () {
-    return new SplitViewDemo()
-  }
-}

package/showcase/design/screens/base/translate/index.js

@@ -1,20 +0,0 @@
-import { TranslateDemo } from './translateDemo.js'
-
-export function hub (parentResolver) {
-  const resolver = parentResolver.forge({
-    factory: new ComponentFactory()
-  })
-
-  return resolver.resolve('TranslateDemo')
-}
-
-export class ComponentFactory {
-  /** @param {string} method */
-  extract (method) {
-    return this[`${method}`]
-  }
-
-  translateDemo () {
-    return new TranslateDemo()
-  }
-}

package/showcase/design/screens/main.js

@@ -1,12 +0,0 @@
-import { Injectark } from '@knowark/injectarkjs'
-import { buildInjector } from '../core/factories/index.js'
-import { setMainRoutes } from './screens.routes.js'
-
-/** @param {string} target */
-export function main (target) {
-  const { strategy, factory } = buildInjector(target)
-  const resolver = new Injectark({ strategy: strategy, factory: factory })
-  const mainComponent = document.querySelector('main')
-  const prefix = '/'
-  setMainRoutes(mainComponent, resolver, prefix)
-}

package/showcase/design/screens/screens.routes.js

@@ -1,23 +0,0 @@
-export function setMainRoutes (mainComponent, resolver, prefix) {
-  const router = resolver.resolve('Router')
-  router.addRoutes(prefix, [
-    {
-      path: '',
-      action: async () => {
-        return router.navigate('/base/accordion')
-      }
-    },
-    {
-      path: 'base',
-      action: async () => {
-        const module = await import('./base/index.js')
-        const _prefix = prefix + 'base/'
-        setMainComponent(mainComponent, module.hub(resolver, _prefix))
-      }
-    }
-  ])
-}
-
-function setMainComponent (mainComponent, screenComponent) {
-  mainComponent.parentElement.replaceChild(screenComponent, mainComponent)
-}