@cumulus-ui/components 0.1.5 → 0.1.8

package/dist/anchor-navigation/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/anchor-navigation/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAM5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAI7D,qBAAa,0BAA2B,SAAQ,aAAa;IAC3D,OAAgB,MAAM,4BAA+C;IAGrE,OAAO,EAAE,qBAAqB,CAAC,MAAM,EAAE,CAAM;IAG7C,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,eAAe,SAAK;IAGpB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,OAAO,CAAC,aAAa,CAAM;IAE3B,OAAO,CAAC,SAAS,CAAqC;IACtD,OAAO,CAAC,WAAW,CAAgD;IAEnE,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,YAAY,GAEvB;IAEQ,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAK5B,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAiBlD,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,iBAAiB;IA0BhB,MAAM;CA6ChB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/anchor-navigation/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAM5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAI7D,qBAAa,0BAA2B,SAAQ,aAAa;IAC3D,OAAgB,MAAM,4BAA+C;IAGrE,OAAO,EAAE,qBAAqB,CAAC,MAAM,EAAE,CAAM;IAG7C,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,eAAe,SAAK;IAGpB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,OAAO,CAAC,aAAa,CAAM;IAE3B,OAAO,CAAC,SAAS,CAAqC;IACtD,OAAO,CAAC,WAAW,CAAgD;IAEnE,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,YAAY,GAEvB;IAEQ,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAK5B,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAiBlD,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,iBAAiB;IA2BhB,MAAM;CA6ChB"}

package/dist/index.js

@@ -2546,32 +2546,32 @@ var treeViewTreeItemStyles = css23`
 // src/internal/styles/expand-toggle-button.ts
 import { css as css24 } from "lit";
 var expandToggleButtonStyles = css24`
-.expand-toggle-button--expand-toggle-button--expand-toggle-icon {
+.expand-toggle-button--expand-toggle-icon {
   transition: transform var(--motion-duration-rotate-90-lyzb0k, 135ms) var(--motion-easing-rotate-90-jhbqg9, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .expand-toggle-button--expand-toggle-button--expand-toggle-icon {
+  .expand-toggle-button--expand-toggle-icon {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .expand-toggle-button--expand-toggle-button--expand-toggle-icon, .awsui-mode-entering .expand-toggle-button--expand-toggle-button--expand-toggle-icon {
+.awsui-motion-disabled .expand-toggle-button--expand-toggle-icon, .awsui-mode-entering .expand-toggle-button--expand-toggle-icon {
   animation: none;
   transition: none;
 }
 
-.expand-toggle-button--expand-toggle-button--expand-toggle-icon {
+.expand-toggle-button--expand-toggle-icon {
   transform: rotate(-90deg);
 
 }
-.expand-toggle-button--expand-toggle-button--expand-toggle-icon:dir(rtl) {
+.expand-toggle-button--expand-toggle-icon:dir(rtl) {
   transform: rotate(90deg);
 }
-.expand-toggle-button--expand-toggle-button--expand-toggle-icon-expanded {
+.expand-toggle-button--expand-toggle-icon-expanded {
   transform: rotate(0deg);
 
 }
-.expand-toggle-button--expand-toggle-button--expand-toggle-icon-expanded:dir(rtl) {
+.expand-toggle-button--expand-toggle-icon-expanded:dir(rtl) {
   transform: rotate(0deg);
 }
 
@@ -2596,14 +2596,14 @@ var expandToggleButtonStyles = css24`
   outline: 0;
   color: var(--color-text-interactive-default-ugh9wp, #424650);
 }
-:host-context([data-awsui-focus-visible=true]) .expand-toggle-button--expand-toggle:not(.expand-toggle-button--expand-toggle-button--disable-focus-highlight):focus {
+:host-context([data-awsui-focus-visible=true]) .expand-toggle-button--expand-toggle:not(.expand-toggle-button--disable-focus-highlight):focus {
   position: relative;
 }
-:host-context([data-awsui-focus-visible=true]) .expand-toggle-button--expand-toggle:not(.expand-toggle-button--expand-toggle-button--disable-focus-highlight):focus {
+:host-context([data-awsui-focus-visible=true]) .expand-toggle-button--expand-toggle:not(.expand-toggle-button--disable-focus-highlight):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-button-focus-outline-gutter-jj138g, 4px) - 1px);
 }
-:host-context([data-awsui-focus-visible=true]) .expand-toggle-button--expand-toggle:not(.expand-toggle-button--expand-toggle-button--disable-focus-highlight):focus::before {
+:host-context([data-awsui-focus-visible=true]) .expand-toggle-button--expand-toggle:not(.expand-toggle-button--disable-focus-highlight):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -2679,12 +2679,8 @@ var CsTreeViewInternal = class extends CsBaseElement {
     }
     return html10`
       <span class=${classMap9({
-      "expand-toggle-icon": true,
-      "expand-toggle-icon-expanded": expanded,
-      "icon": true,
-      "size-small": true,
-      "size-small-mapped-height": true,
-      "variant-normal": true
+      "expand-toggle-button--expand-toggle-icon": true,
+      "expand-toggle-button--expand-toggle-icon-expanded": expanded
     })}>
         <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
           <path class="filled stroke-linejoin-round" d="m8 11 4-6H4l4 6Z"></path>
@@ -2703,18 +2699,23 @@ var CsTreeViewInternal = class extends CsBaseElement {
     const contentLabel = typeof rendered.content === "string" ? rendered.content : id;
     return html10`
       <li
-        class=${classMap9({ "treeitem": true, "offset": level > 0, "expandable": hasChildren, "expanded": hasChildren && expanded })}
+        class=${classMap9({
+      "tree-view-tree-item--treeitem": true,
+      "tree-view-tree-item--offset": level > 0,
+      "expandable": hasChildren,
+      "expanded": hasChildren && expanded
+    })}
         role="treeitem"
         aria-expanded=${hasChildren ? String(expanded) : nothing2}
         aria-level=${level + 1}
         data-node-id=${id}
       >
-        <div class="treeitem-content-wrapper">
-          <div class="expand-toggle-wrapper">
-            <div class="toggle">
+        <div class="tree-view-tree-item--treeitem-content-wrapper">
+          <div class="tree-view-tree-item--expand-toggle-wrapper">
+            <div class="tree-view-tree-item--toggle">
               ${hasChildren ? html10`
                   <button
-                    class="expand-toggle disable-focus-highlight tree-item-focus-target"
+                    class="expand-toggle-button--expand-toggle expand-toggle-button--disable-focus-highlight tree-view-tree-item--tree-item-focus-target"
                     type="button"
                     tabindex="-1"
                     aria-label=${contentLabel}
@@ -2723,15 +2724,15 @@ var CsTreeViewInternal = class extends CsBaseElement {
                   >
                     ${this._renderToggleIcon(expanded)}
                   </button>` : html10`
-                  <div class="tree-item-focus-target"
+                  <div class="tree-view-tree-item--tree-item-focus-target"
                     role="group"
                     tabindex="-1"
                     aria-label=${contentLabel}
                   ></div>`}
             </div>
           </div>
-          <div class="structured-item-wrapper">
-            <div class="structured-item--root tree-item-structured-item">
+          <div class="tree-view-tree-item--structured-item-wrapper">
+            <div class="structured-item--root tree-view-tree-item--tree-item-structured-item">
               ${rendered.icon ? html10`<div class="structured-item--icon">${rendered.icon}</div>` : nothing2}
               <div class="structured-item--main">
                 <div class="structured-item--content-wrap">
@@ -2746,7 +2747,7 @@ var CsTreeViewInternal = class extends CsBaseElement {
           </div>
         </div>
         ${hasChildren && expanded ? html10`
-          <ul class="treeitem-group" role="group">
+          <ul class="tree-view-tree-item--treeitem-group" role="group">
             ${children.map((child, i) => this._renderNode(child, i, level + 1, globalIndex))}
           </ul>
         ` : nothing2}
@@ -4775,6 +4776,7 @@ var CsAnchorNavigationInternal = class extends CsBaseElement {
   }
   _renderAnchorLink(anchor) {
     const isActive = this._currentHref === anchor.href;
+    const indent = 18 + Math.max(0, anchor.level - 1) * 16;
     return html16`
       <li class=${classMap14({
       "anchor-item": true,
@@ -4789,7 +4791,7 @@ var CsAnchorNavigationInternal = class extends CsBaseElement {
           aria-current=${ifDefined7(isActive ? "location" : void 0)}
           @click=${(e) => this._onAnchorClick(e, anchor)}
         >
-          <span class="anchor-link-text">${anchor.text}</span>
+          <span class="anchor-link-text" style="padding-inline-start:${indent}px">${anchor.text}</span>
           ${anchor.info ? html16`<span class="anchor-link-info">${anchor.info}</span>` : nothing3}
         </a>
       </li>
@@ -4822,7 +4824,7 @@ var CsAnchorNavigationInternal = class extends CsBaseElement {
                   aria-current=${ifDefined7(isActive ? "location" : void 0)}
                   @click=${(e) => this._onAnchorClick(e, anchor)}
                 >
-                  <span class="anchor-link-text">${anchor.text}</span>
+                  <span class="anchor-link-text" style="padding-inline-start:18px">${anchor.text}</span>
                   ${anchor.info ? html16`<span class="anchor-link-info">${anchor.info}</span>` : nothing3}
                 </a>
                 <ol class="anchor-list">

package/dist/tree-view/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/tree-view/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAU5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIrD,qBAAa,kBAAkB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,aAAa;IAC5D,OAAgB,MAAM,4BAAwJ;IAG9K,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAM;IAG7B,UAAU,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,aAAa,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAG7E,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAG5D,eAAe,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;IAGxF,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAGtC,gBAAgB,SAAM;IAGtB,qBAAqB,SAAM;IAG3B,sBAAsB,SAAM;IAG5B,cAAc,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC;IAGrD,WAAW,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAG3C,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,wBAAwB,KAAK,OAAO,CAAC;IAEjF,OAAO,CAAC,YAAY,CAAqB;IAEhC,UAAU,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,cAAc,GAAG,IAAI;IAMhE,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,WAAW;IAqEV,MAAM;CAwBhB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../src/tree-view/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAU5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIrD,qBAAa,kBAAkB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,aAAa;IAC5D,OAAgB,MAAM,4BAAwJ;IAG9K,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAM;IAG7B,UAAU,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,aAAa,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAG7E,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IAG5D,eAAe,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC;IAGxF,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAGtC,gBAAgB,SAAM;IAGtB,qBAAqB,SAAM;IAG3B,sBAAsB,SAAM;IAG5B,cAAc,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC;IAGrD,WAAW,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAG3C,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,wBAAwB,KAAK,OAAO,CAAC;IAEjF,OAAO,CAAC,YAAY,CAAqB;IAEhC,UAAU,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,cAAc,GAAG,IAAI;IAMhE,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,iBAAiB;IAiBzB,OAAO,CAAC,WAAW;IA0EV,MAAM;CAwBhB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cumulus-ui/components",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "description": "Web components inspired by Cloudscape Design System",
   "type": "module",
   "main": "./dist/index.js",