@pine-ds/core 0.2.4 → 1.0.1

package/dist/collection/components/pds-tooltip/pds-tooltip.css

@@ -1,35 +1,35 @@
 :host {
-  --background-color: var(--pine-color-neutral-charcoal-400);
-  --box-shadow: var(--pine-box-shadow-md);
-  --color: var(--pine-color-base-white);
-  --width: 320px;
-  --arrow-size: 6px;
-  --arrow-offset: 14px;
-  --overlay-border-radius: var(--pine-border-radius-md);
-  --overlay-font-size: var(--pine-font-size-body-sm);
-  --overlay-line-height: var(--pine-line-height-sm);
-  --overlay-padding: var(--pine-spacing-xs) calc(var(--pine-spacing-md) / 2);
-  --arrow-pointing-down: var(--arrow-size) var(--arrow-size) 0;
-  --arrow-pointing-to-the-right: var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);
-  --arrow-pointing-to-the-left: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;
-  --arrow-pointing-up: 0 var(--arrow-size) var(--arrow-size);
+  --border-radius-overlay: var(--pine-border-radius-125);
+  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;
+  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;
+  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
+  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
+  --box-shadow-default: var(--pine-box-shadow-md);
+  --color-background-default: var(--pine-color-charcoal-400);
+  --color-text-default: var(--pine-color-white);
+  --font-size-overlay: var(--pine-font-size-087);
+  --line-height-overlay: var(--pine-line-height-125);
+  --sizing-arrow-default: 6px;
+  --sizing-arrow-offset: 14px;
+  --sizing-width-default: 320px;
+  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);
   display: inline-block;
   position: relative;
 }
 :host ::slotted([slot=content]) {
   white-space: normal;
-  width: var(--width);
+  width: var(--sizing-width-default);
 }
 
 .pds-tooltip__content {
-  background-color: var(--background-color);
-  border-radius: var(--overlay-border-radius);
-  box-shadow: var(--box-shadow);
-  color: var(--color);
-  font-size: var(--overlay-font-size);
-  line-height: var(--overlay-line-height);
+  background-color: var(--color-background-default);
+  border-radius: var(--border-radius-overlay);
+  box-shadow: var(--box-shadow-default);
+  color: var(--color-text-default);
+  font-size: var(--font-size-overlay);
+  line-height: var(--line-height-overlay);
   opacity: 0;
-  padding: var(--overlay-padding);
+  padding: var(--spacing-padding-overlay);
   position: absolute;
   visibility: hidden;
   width: max-content;
@@ -46,97 +46,97 @@
   border-color: transparent;
   border-right-color: transparent;
   border-style: solid;
-  border-width: var(--arrow-pointing-to-the-left);
+  border-width: var(--border-width-arrow-left);
   content: "";
   height: 0;
   position: absolute;
   width: 0;
 }
 .pds-tooltip--right .pds-tooltip__content::after {
-  border-inline-end-color: var(--background-color);
-  border-width: var(--arrow-pointing-to-the-left);
-  left: calc(var(--arrow-size) * -1);
+  border-inline-end-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-left);
+  left: calc(var(--sizing-arrow-default) * -1);
   top: 50%;
   transform: translateY(-50%);
 }
 .pds-tooltip--right-end .pds-tooltip__content::after {
-  border-inline-end-color: var(--background-color);
-  border-width: var(--arrow-pointing-to-the-left);
-  bottom: var(--arrow-offset);
-  left: calc(var(--arrow-size) * -1);
+  border-inline-end-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-left);
+  bottom: var(--sizing-arrow-offset);
+  left: calc(var(--sizing-arrow-default) * -1);
   top: initial;
 }
 .pds-tooltip--right-start .pds-tooltip__content::after {
-  border-inline-end-color: var(--background-color);
-  border-width: var(--arrow-pointing-to-the-left);
-  left: calc(var(--arrow-size) * -1);
-  top: var(--arrow-offset);
+  border-inline-end-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-left);
+  left: calc(var(--sizing-arrow-default) * -1);
+  top: var(--sizing-arrow-offset);
 }
 .pds-tooltip--top .pds-tooltip__content::after {
-  border-block-start-color: var(--background-color);
-  border-width: var(--arrow-pointing-down);
-  bottom: calc(var(--arrow-size) * -1);
+  border-block-start-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-down);
+  bottom: calc(var(--sizing-arrow-default) * -1);
   left: 50%;
   top: initial;
   transform: translateX(-50%);
 }
 .pds-tooltip--top-start .pds-tooltip__content::after {
-  border-block-start-color: var(--background-color);
-  border-width: var(--arrow-pointing-down);
-  bottom: calc(var(--arrow-size) * -1);
-  left: var(--arrow-offset);
+  border-block-start-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-down);
+  bottom: calc(var(--sizing-arrow-default) * -1);
+  left: var(--sizing-arrow-offset);
   top: initial;
 }
 .pds-tooltip--top-end .pds-tooltip__content::after {
-  border-block-start-color: var(--background-color);
-  border-width: var(--arrow-pointing-down);
-  bottom: calc(var(--arrow-size) * -1);
+  border-block-start-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-down);
+  bottom: calc(var(--sizing-arrow-default) * -1);
   left: initial;
-  right: var(--arrow-offset);
+  right: var(--sizing-arrow-offset);
   top: initial;
 }
 .pds-tooltip--left .pds-tooltip__content::after {
-  border-inline-start-color: var(--background-color);
-  border-width: var(--arrow-pointing-to-the-right);
+  border-inline-start-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-right);
   left: initial;
-  right: calc(var(--arrow-size) * -1);
+  right: calc(var(--sizing-arrow-default) * -1);
   top: 50%;
   transform: translateY(-50%);
 }
 .pds-tooltip--left-end .pds-tooltip__content::after {
-  border-inline-start-color: var(--background-color);
-  border-width: var(--arrow-pointing-to-the-right);
-  bottom: var(--arrow-offset);
+  border-inline-start-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-right);
+  bottom: var(--sizing-arrow-offset);
   left: initial;
-  right: calc(var(--arrow-size) * -1);
+  right: calc(var(--sizing-arrow-default) * -1);
   top: initial;
 }
 .pds-tooltip--left-start .pds-tooltip__content::after {
-  border-inline-start-color: var(--background-color);
-  border-width: var(--arrow-pointing-to-the-right);
+  border-inline-start-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-right);
   left: initial;
-  right: calc(var(--arrow-size) * -1);
-  top: var(--arrow-offset);
+  right: calc(var(--sizing-arrow-default) * -1);
+  top: var(--sizing-arrow-offset);
 }
 .pds-tooltip--bottom .pds-tooltip__content::after {
-  border-block-end-color: var(--background-color);
-  border-width: var(--arrow-pointing-up);
+  border-block-end-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-up);
   left: 50%;
-  top: calc(var(--arrow-size) * -1);
+  top: calc(var(--sizing-arrow-default) * -1);
   transform: translateX(-50%);
 }
 .pds-tooltip--bottom-end .pds-tooltip__content::after {
-  border-block-end-color: var(--background-color);
-  border-width: var(--arrow-pointing-up);
+  border-block-end-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-up);
   left: initial;
-  right: var(--arrow-offset);
-  top: calc(var(--arrow-size) * -1);
+  right: var(--sizing-arrow-offset);
+  top: calc(var(--sizing-arrow-default) * -1);
 }
 .pds-tooltip--bottom-start .pds-tooltip__content::after {
-  border-block-end-color: var(--background-color);
-  border-width: var(--arrow-pointing-up);
-  left: var(--arrow-offset);
-  top: calc(var(--arrow-size) * -1);
+  border-block-end-color: var(--color-background-default);
+  border-width: var(--border-width-arrow-up);
+  left: var(--sizing-arrow-offset);
+  top: calc(var(--sizing-arrow-default) * -1);
 }
 .pds-tooltip--no-arrow .pds-tooltip__content::after {
   border-width: 0;

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-04-29T18:37:09",
+  "timestamp": "2024-05-31T16:35:32",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.15.0",
@@ -3631,7 +3631,7 @@
           "docsTags": [
             {
               "name": "defaultValue",
-              "text": "'var(--pds-color-primary)'"
+              "text": "'var(--pine-color-blue-300)'"
             }
           ],
           "values": [
@@ -4440,15 +4440,15 @@
           "required": false
         },
         {
-          "name": "handle",
+          "name": "showHandle",
           "type": "boolean",
           "complexType": {
             "original": "boolean",
             "resolved": "boolean",
             "references": {}
           },
-          "mutable": false,
-          "attr": "handle",
+          "mutable": true,
+          "attr": "show-handle",
           "reflectToAttr": false,
           "docs": "Determines whether `sortable-item` should have a handle.",
           "docsTags": [
@@ -5319,12 +5319,12 @@
       ],
       "styles": [
         {
-          "name": "--panel-margin-top",
+          "name": "--spacing-panel-margin-top",
           "annotation": "prop",
           "docs": "Optional margin-top for panels"
         },
         {
-          "name": "--panel-padding",
+          "name": "--spacing-panel-padding",
           "annotation": "prop",
           "docs": "Optional padding for panels"
         }

package/{components/index2.js → dist/esm/index-c6934caf.js}

@@ -3,11 +3,12 @@ const caretDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/sv
 const checkCircleFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'><path d='M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8Zm4.473 5.807L7.14 11.14c-.26.26-.68.26-.94 0L3.533 8.473a.664.664 0 1 1 .94-.94l2.194 2.194 4.86-4.86c.26-.26.68-.26.94 0 .266.253.266.68.006.94Z'/></svg>";
 const copy = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'><path fill-rule='evenodd' d='M10 5.333c0-.368.299-.666.667-.666h4c.368 0 .666.298.666.666v9.334a.667.667 0 0 1-.666.666H5.333a.667.667 0 0 1-.666-.666v-4a.667.667 0 1 1 1.333 0V14h8V6h-3.333A.667.667 0 0 1 10 5.333Z'/><path fill-rule='evenodd' d='M.667 1.333c0-.368.298-.666.666-.666h9.334c.368 0 .666.298.666.666v9.334a.667.667 0 0 1-.666.666H1.333a.667.667 0 0 1-.666-.666V1.333ZM2 2v8h8V2H2Z'/></svg>";
 const downSmall = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'><path fill-rule='evenodd' d='M3.594 5.594a.889.889 0 0 1 1.257 0L7.778 8.52l2.927-2.927a.889.889 0 0 1 1.257 1.257l-3.556 3.555a.889.889 0 0 1-1.257 0L3.594 6.851a.889.889 0 0 1 0-1.257Z'/></svg>";
+const handle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'><path fill-rule='evenodd' d='M.667 5.333a.667.667 0 0 0 0 1.334h14.666a.667.667 0 1 0 0-1.334H.667Zm0 4.667a.667.667 0 0 0 0 1.333h14.666a.667.667 0 1 0 0-1.333H.667Z'/></svg>";
 const launch = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'><path fill-rule='evenodd' d='M15.138.862a.664.664 0 0 1 .195.461v5.344a.667.667 0 0 1-1.333 0V2.943L7.805 9.138a.667.667 0 1 1-.943-.943L13.057 2H9.333a.667.667 0 0 1 0-1.333h5.333c.171 0 .342.065.472.195ZM1.333 2a.667.667 0 0 0-.666.667v12c0 .368.298.666.666.666h12a.667.667 0 0 0 .667-.666V10a.667.667 0 0 0-1.333 0v4H2V3.333h4A.667.667 0 1 0 6 2H1.333Z'/></svg>";
 const remove = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'><path d='M13.138 3.805a.667.667 0 0 0-.943-.943L8 7.057 3.805 2.862a.667.667 0 1 0-.943.943L7.057 8l-4.195 4.195a.667.667 0 1 0 .943.943L8 8.943l4.195 4.195a.667.667 0 0 0 .943-.943L8.943 8l4.195-4.195Z'/></svg>";
 const upSmall = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'><path fill-rule='evenodd' d='M7.15 5.594a.889.889 0 0 1 1.256 0l3.556 3.555a.889.889 0 0 1-1.257 1.257L7.778 7.48 4.85 10.406A.889.889 0 1 1 3.594 9.15l3.555-3.555Z'/></svg>";
 const userFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' class='pdsicon'><path d='M12.222 8.925A5.98 5.98 0 0 1 8 10.667a5.983 5.983 0 0 1-4.222-1.742A7.335 7.335 0 0 0 0 15.333c0 .368.299.667.667.667h14.666a.667.667 0 0 0 .667-.667 7.335 7.335 0 0 0-3.778-6.408Z'/><path d='M8 9.333A4.667 4.667 0 1 0 8 0a4.667 4.667 0 0 0 0 9.333Z'/></svg>";
 
-export { copy as a, caretDown as b, checkCircleFilled as c, downSmall as d, upSmall as e, launch as l, remove as r, userFilled as u };
+export { copy as a, caretDown as b, checkCircleFilled as c, downSmall as d, upSmall as e, handle as h, launch as l, remove as r, userFilled as u };
 
-//# sourceMappingURL=index2.js.map
+//# sourceMappingURL=index-c6934caf.js.map