Bug fixes.

Author: Templarian

src/pg/button/button.css

@@ -9,7 +9,7 @@
   font-family: var(--pg-font-family);
   font-size: var(--pg-button-font-size, 1rem);
   line-height: var(--pg-button-line-height, 1.5rem);
-  border: 1px solid var(--pg-button-border-color, #453C4F);
+  border: var(--pg-button-border-width, 1px) solid var(--pg-button-border-color, #453C4F);
   background-color: var(--pg-button-background-color, #FFFFFF);
   color: var(--pg-button-color, #453C4F);
   padding: var(--pg-button-padding, 0.25rem 0.5rem);
@@ -19,7 +19,7 @@
 }
 
 [part="button"]:hover {
-  border: 1px solid var(--pg-button-hover-border-color, #453C4F);
+  --pg-button-border-color: var(--pg-button-hover-border-color, #453C4F);
   background-color: var(--pg-button-hover-background-color, #453C4F);
   color: var(--pg-button-hover-color, #FFFFFF);
   --pg-icon-color: var(--pg-button-hover-color, #FFFFFF);

src/pg/table/__examples__/basic/basic.css

@@ -0,0 +1,4 @@
+[part=table] {
+  --pg-button-padding: 0;
+  --pg-button-border-width: 0;
+}

src/pg/table/__examples__/basic/basic.ts

@@ -3,13 +3,15 @@ import { Component, Part, Prop } from '@pictogrammers/element';
 import PgTable, { createTableItem } from '../../table';
 import PgTableCellButtonIcon from '../../../tableCellButtonIcon/tableCellButtonIcon';
 
+import style from './basic.css';
 import template from './basic.html';
 
 const IconStar = 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z';
     const IconStarOutline = 'M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z';
 
 @Component({
   selector: 'x-pg-table-basic',
+  style,
   template
 })
 export default class XPgTableBasic extends HTMLElement {

src/pg/table/table.css

@@ -5,6 +5,7 @@
 
 [part=table] {
   display: table;
+  border-spacing: 2px;
 }
 
 [part=header] {

src/pg/tableCellText/tableCellText.css

@@ -4,8 +4,9 @@
 
 [part=label] {
   display: table-cell;
-  border-style: solid;
-  border-width: 1px;
-  border-color: var(--pg-table-border-color, #453C4F);
   padding: 0.125rem 0.5rem;
+  border-top: 0;
+  background: #F1F1F1;
+  border-radius: 0.125rem;
+  vertical-align: middle;
 }

src/pg/tableColumn/tableColumn.css

@@ -2,22 +2,11 @@
   display: contents;
 }
 
-:host(:first-child) [part=label] {
-  border-top-left-radius: 0.25rem;
-}
-
-:host(:last-child) [part=label] {
-  border-top-right-radius: 0.25rem;
-}
-
-:host(:not(:first-child)) [part=label] {
-  border-left: 0;
-}
-
 [part=label] {
   display: table-cell;
   border-style: solid;
-  border-width: 1px;
+  border-width: 0 0 1px 0;
   border-color: var(--pg-table-border-color, #453C4F);
   padding: 0.125rem 0.5rem;
+  font-weight: 600;
 }