@pantograph/styles 0.0.19 → 0.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.js +1 -1
- package/dist/index.umd.cjs +1 -1
- package/dist/menu_item.css +1 -1
- package/dist/menu_item.js +1 -1
- package/dist/menu_item.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/menu_item.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.pc_menu_item{box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;outline:0;display:flex;align-items:center;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all;background:var(--ptc-menuitem-bg)}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):not(:hover):not([data-highlighted]):not([data-hover]):not(:active){--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):hover,.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected)[data-highlighted],.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected)[data-hover]{--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):active:not(:has(.pc_sub_menu__items .pc_menu_item:active)){--ptc-menuitem-bg: rgba(var(--pt-bg-trigger));--ptc-menuitem-fg: rgba(var(--pt-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected).pc_sub_menu__trigger:active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle));--ptc-menuitem-fg: rgba(var(--pt-primary-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):hover,.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled)[data-highlighted],.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled)[data-hover]{--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):active:not(:has(.pc_menu_item:active)){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-trigger));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled){--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):not(:hover):not(:active){--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-danger-fg))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):hover{--ptc-menuitem-bg: rgba(var(--pt-danger-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-danger-fg-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):active{--ptc-menuitem-bg: rgba(var(--pt-danger-fill-subtle-trigger));--ptc-menuitem-fg: rgba(var(--pt-danger-fg-trigger))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--disabled{cursor:not-allowed;--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-disable-fg));--ptc-menuitem-description: rgba(var(--pt-disable-fg))}.pc_menu_item.pc_menu_item--static-style{--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item>.pc_menu_item__content{display:flex;flex-direction:column;flex:1 1 0%;gap:var(--pt-dimension-200, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_menu_item>.pc_menu_item__content>.pc_menu_item__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ptc-menuitem-description)}.pc_menu_item>.pc_menu_item__content>.pc_menu_item__title{color:var(--ptc-menuitem-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_menu_item.pc_menu_item--hover-trailing .pc_menu_item__trailing{display:none}.pc_menu_item.pc_menu_item--hover-trailing:hover .pc_menu_item__trailing{display:flex}.pc_menu_item:not(.pc_menu_item--disabled):not(.pc_menu_item--static-style){cursor:pointer}.pc_menu_item.pc_menu_item--sm{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-sm, 4px);padding:var(--pt-dimension-200, 4px)}.pc_menu_item.pc_menu_item--sm:not(.pc_menu_item--description){height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px)}.pc_menu_item.pc_menu_item--sm.pc_menu_item--description{height:42px;min-height:42px;max-height:42px}.pc_menu_item.pc_menu_item--sm>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item.pc_menu_item--md{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-md, 6px);padding:var(--pt-dimension-300, 6px)}.pc_menu_item.pc_menu_item--md:not(.pc_menu_item--description){height:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px);max-height:var(--pt-dimension-1600, 32px)}.pc_menu_item.pc_menu_item--md.pc_menu_item--description{height:50px;min-height:50px;max-height:50px}.pc_menu_item.pc_menu_item--md>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_menu_item.pc_menu_item--md>.pc_menu_item__content>.pc_menu_item__description{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item.pc_menu_item--lg{gap:var(--pt-dimension-300, 6px);border-radius:var(--pt-roundness-lg, 8px);padding:var(--pt-dimension-400, 8px)}.pc_menu_item.pc_menu_item--lg:not(.pc_menu_item--description){height:var(--pt-dimension-2000, 40px);min-height:var(--pt-dimension-2000, 40px);max-height:var(--pt-dimension-2000, 40px)}.pc_menu_item.pc_menu_item--lg.pc_menu_item--description{height:54px;min-height:54px;max-height:54px}.pc_menu_item.pc_menu_item--lg>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_menu_item.pc_menu_item--lg>.pc_menu_item__content .pc_menu_item__description{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item>.pc_menu_item__leading{color:var(--ptc-menuitem-fg);height:100%;display:flex}.pc_menu_item>.pc_menu_item__leading>.pc_menu_item__leading_content{display:flex;align-items:center;gap:var(--pt-dimension-200, 4px)}.pc_menu_item>.pc_menu_item__branch{--ptu-text-opacity:1;color:rgba(var(--pt-gray-9),var(--ptu-text-opacity))}.pc_menu_item>.pc_menu_item__trailing{color:var(--ptc-menuitem-fg);display:flex;align-items:center;gap:var(--pt-dimension-200, 4px)}.pc_menu_item.pc_menu_item--leading-center>.pc_menu_item__leading{align-items:center}.pc_menu_item.pc_menu_item--leading-center>.pc_menu_item__leading>.pc_menu_item__leading_content{height:100%}.pc_menu_item:not(.pc_menu_item--un-focusable):not(.pc_menu_item--disabled):focus{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_sub_menu{width:100%}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger.pc_menu_item--selected:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu__items{display:flex;flex-direction:column;gap:var(--pt-dimension-200, 4px)}.pc_sub_menu__items .pc_sub_menu,.pc_menu .pc_sub_menu{width:100%}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active) .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):hover .pc_menu_item,.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled)[data-highlighted] .pc_menu_item,.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled)[data-hover] .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):active .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active) .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):hover .pc_menu_item,.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled)[data-highlighted] .pc_menu_item,.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled)[data-hover] .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):active .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_tree__node.pc_tree__node--disabled .pc_menu_item{cursor:not-allowed;--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-disable-fg));--ptc-menuitem-description: rgba(var(--pt-disable-fg))}
|
|
1
|
+
.pc_menu_item{box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;outline:0;display:flex;align-items:center;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all;background:var(--ptc-menuitem-bg)}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):not(:hover):not([data-highlighted]):not([data-hover]):not(:active){--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):hover,.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected)[data-highlighted],.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected)[data-hover]{--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):active:not(:has(.pc_sub_menu__items .pc_menu_item:active)){--ptc-menuitem-bg: rgba(var(--pt-bg-trigger));--ptc-menuitem-fg: rgba(var(--pt-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected).pc_sub_menu__trigger:active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle));--ptc-menuitem-fg: rgba(var(--pt-primary-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):hover,.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled)[data-highlighted],.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled)[data-hover]{--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):active:not(:has(.pc_menu_item:active)){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-trigger));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled){--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):not(:hover):not(:active){--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-danger-fg))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):hover{--ptc-menuitem-bg: rgba(var(--pt-danger-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-danger-fg-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):active{--ptc-menuitem-bg: rgba(var(--pt-danger-fill-subtle-trigger));--ptc-menuitem-fg: rgba(var(--pt-danger-fg-trigger))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--disabled{cursor:not-allowed;--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-disable-fg));--ptc-menuitem-description: rgba(var(--pt-disable-fg))}.pc_menu_item.pc_menu_item--static-style{--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item>.pc_menu_item__content{display:flex;flex-direction:column;flex:1 1 0%;gap:var(--pt-dimension-200, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_menu_item>.pc_menu_item__content>.pc_menu_item__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ptc-menuitem-description)}.pc_menu_item>.pc_menu_item__content>.pc_menu_item__title{color:var(--ptc-menuitem-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_menu_item.pc_menu_item--hover-trailing .pc_menu_item__trailing{display:none}.pc_menu_item.pc_menu_item--hover-trailing:hover .pc_menu_item__trailing{display:flex}.pc_menu_item:not(.pc_menu_item--disabled):not(.pc_menu_item--static-style){cursor:pointer}.pc_menu_item.pc_menu_item--sm{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-sm, 4px);padding:var(--pt-dimension-200, 4px)}.pc_menu_item.pc_menu_item--sm:not(.pc_menu_item--description){height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px)}.pc_menu_item.pc_menu_item--sm.pc_menu_item--description{height:42px;min-height:42px;max-height:42px}.pc_menu_item.pc_menu_item--sm>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item.pc_menu_item--md{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-md, 6px);padding:var(--pt-dimension-300, 6px)}.pc_menu_item.pc_menu_item--md:not(.pc_menu_item--description){height:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px);max-height:var(--pt-dimension-1600, 32px)}.pc_menu_item.pc_menu_item--md.pc_menu_item--description{height:50px;min-height:50px;max-height:50px}.pc_menu_item.pc_menu_item--md>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_menu_item.pc_menu_item--md>.pc_menu_item__content>.pc_menu_item__description{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item.pc_menu_item--lg{gap:var(--pt-dimension-300, 6px);border-radius:var(--pt-roundness-lg, 8px);padding:var(--pt-dimension-400, 8px)}.pc_menu_item.pc_menu_item--lg:not(.pc_menu_item--description){height:var(--pt-dimension-2000, 40px);min-height:var(--pt-dimension-2000, 40px);max-height:var(--pt-dimension-2000, 40px)}.pc_menu_item.pc_menu_item--lg.pc_menu_item--description{height:54px;min-height:54px;max-height:54px}.pc_menu_item.pc_menu_item--lg>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_menu_item.pc_menu_item--lg>.pc_menu_item__content .pc_menu_item__description{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item>.pc_menu_item__leading{height:100%;display:flex;gap:var(--pt-dimension-200, 4px);color:var(--ptc-menuitem-fg)}.pc_menu_item>.pc_menu_item__branch{--ptu-text-opacity:1;color:rgba(var(--pt-gray-9),var(--ptu-text-opacity))}.pc_menu_item>.pc_menu_item__trailing{color:var(--ptc-menuitem-fg);display:flex;align-items:center;gap:var(--pt-dimension-200, 4px)}.pc_menu_item.pc_menu_item--leading-center>.pc_menu_item__leading{align-items:center}.pc_menu_item:not(.pc_menu_item--leading-center)>.pc_menu_item__leading{align-items:flex-start}.pc_menu_item:not(.pc_menu_item--un-focusable):not(.pc_menu_item--disabled):focus{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_sub_menu{width:100%}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger.pc_menu_item--selected:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu__items{display:flex;flex-direction:column;gap:var(--pt-dimension-200, 4px)}.pc_sub_menu__items .pc_sub_menu,.pc_menu .pc_sub_menu{width:100%}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active) .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):hover .pc_menu_item,.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled)[data-highlighted] .pc_menu_item,.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled)[data-hover] .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):active .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active) .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):hover .pc_menu_item,.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled)[data-highlighted] .pc_menu_item,.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled)[data-hover] .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):active .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_tree__node.pc_tree__node--disabled .pc_menu_item{cursor:not-allowed;--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-disable-fg));--ptc-menuitem-description: rgba(var(--pt-disable-fg))}
|
package/dist/menu_item.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
|
|
2
|
-
const cssText = ".pc_menu_item{box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;outline:0;display:flex;align-items:center;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all;background:var(--ptc-menuitem-bg)}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):not(:hover):not([data-highlighted]):not([data-hover]):not(:active){--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):hover,.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected)[data-highlighted],.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected)[data-hover]{--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):active:not(:has(.pc_sub_menu__items .pc_menu_item:active)){--ptc-menuitem-bg: rgba(var(--pt-bg-trigger));--ptc-menuitem-fg: rgba(var(--pt-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected).pc_sub_menu__trigger:active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle));--ptc-menuitem-fg: rgba(var(--pt-primary-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):hover,.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled)[data-highlighted],.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled)[data-hover]{--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):active:not(:has(.pc_menu_item:active)){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-trigger));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled){--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):not(:hover):not(:active){--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-danger-fg))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):hover{--ptc-menuitem-bg: rgba(var(--pt-danger-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-danger-fg-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):active{--ptc-menuitem-bg: rgba(var(--pt-danger-fill-subtle-trigger));--ptc-menuitem-fg: rgba(var(--pt-danger-fg-trigger))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--disabled{cursor:not-allowed;--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-disable-fg));--ptc-menuitem-description: rgba(var(--pt-disable-fg))}.pc_menu_item.pc_menu_item--static-style{--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item>.pc_menu_item__content{display:flex;flex-direction:column;flex:1 1 0%;gap:var(--pt-dimension-200, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_menu_item>.pc_menu_item__content>.pc_menu_item__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ptc-menuitem-description)}.pc_menu_item>.pc_menu_item__content>.pc_menu_item__title{color:var(--ptc-menuitem-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_menu_item.pc_menu_item--hover-trailing .pc_menu_item__trailing{display:none}.pc_menu_item.pc_menu_item--hover-trailing:hover .pc_menu_item__trailing{display:flex}.pc_menu_item:not(.pc_menu_item--disabled):not(.pc_menu_item--static-style){cursor:pointer}.pc_menu_item.pc_menu_item--sm{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-sm, 4px);padding:var(--pt-dimension-200, 4px)}.pc_menu_item.pc_menu_item--sm:not(.pc_menu_item--description){height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px)}.pc_menu_item.pc_menu_item--sm.pc_menu_item--description{height:42px;min-height:42px;max-height:42px}.pc_menu_item.pc_menu_item--sm>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item.pc_menu_item--md{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-md, 6px);padding:var(--pt-dimension-300, 6px)}.pc_menu_item.pc_menu_item--md:not(.pc_menu_item--description){height:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px);max-height:var(--pt-dimension-1600, 32px)}.pc_menu_item.pc_menu_item--md.pc_menu_item--description{height:50px;min-height:50px;max-height:50px}.pc_menu_item.pc_menu_item--md>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_menu_item.pc_menu_item--md>.pc_menu_item__content>.pc_menu_item__description{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item.pc_menu_item--lg{gap:var(--pt-dimension-300, 6px);border-radius:var(--pt-roundness-lg, 8px);padding:var(--pt-dimension-400, 8px)}.pc_menu_item.pc_menu_item--lg:not(.pc_menu_item--description){height:var(--pt-dimension-2000, 40px);min-height:var(--pt-dimension-2000, 40px);max-height:var(--pt-dimension-2000, 40px)}.pc_menu_item.pc_menu_item--lg.pc_menu_item--description{height:54px;min-height:54px;max-height:54px}.pc_menu_item.pc_menu_item--lg>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_menu_item.pc_menu_item--lg>.pc_menu_item__content .pc_menu_item__description{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item>.pc_menu_item__leading{color:var(--ptc-menuitem-fg);height:100%;display:flex}.pc_menu_item>.pc_menu_item__leading>.pc_menu_item__leading_content{display:flex;align-items:center;gap:var(--pt-dimension-200, 4px)}.pc_menu_item>.pc_menu_item__branch{--ptu-text-opacity:1;color:rgba(var(--pt-gray-9),var(--ptu-text-opacity))}.pc_menu_item>.pc_menu_item__trailing{color:var(--ptc-menuitem-fg);display:flex;align-items:center;gap:var(--pt-dimension-200, 4px)}.pc_menu_item.pc_menu_item--leading-center>.pc_menu_item__leading{align-items:center}.pc_menu_item.pc_menu_item--leading-center>.pc_menu_item__leading>.pc_menu_item__leading_content{height:100%}.pc_menu_item:not(.pc_menu_item--un-focusable):not(.pc_menu_item--disabled):focus{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_sub_menu{width:100%}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger.pc_menu_item--selected:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu__items{display:flex;flex-direction:column;gap:var(--pt-dimension-200, 4px)}.pc_sub_menu__items .pc_sub_menu,.pc_menu .pc_sub_menu{width:100%}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active) .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):hover .pc_menu_item,.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled)[data-highlighted] .pc_menu_item,.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled)[data-hover] .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):active .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active) .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):hover .pc_menu_item,.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled)[data-highlighted] .pc_menu_item,.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled)[data-hover] .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):active .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_tree__node.pc_tree__node--disabled .pc_menu_item{cursor:not-allowed;--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-disable-fg));--ptc-menuitem-description: rgba(var(--pt-disable-fg))}\n";
|
|
2
|
+
const cssText = ".pc_menu_item{box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;outline:0;display:flex;align-items:center;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all;background:var(--ptc-menuitem-bg)}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):not(:hover):not([data-highlighted]):not([data-hover]):not(:active){--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):hover,.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected)[data-highlighted],.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected)[data-hover]{--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):active:not(:has(.pc_sub_menu__items .pc_menu_item:active)){--ptc-menuitem-bg: rgba(var(--pt-bg-trigger));--ptc-menuitem-fg: rgba(var(--pt-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected).pc_sub_menu__trigger:active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle));--ptc-menuitem-fg: rgba(var(--pt-primary-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):hover,.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled)[data-highlighted],.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled)[data-hover]{--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):active:not(:has(.pc_menu_item:active)){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-trigger));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled){--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):not(:hover):not(:active){--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-danger-fg))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):hover{--ptc-menuitem-bg: rgba(var(--pt-danger-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-danger-fg-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):active{--ptc-menuitem-bg: rgba(var(--pt-danger-fill-subtle-trigger));--ptc-menuitem-fg: rgba(var(--pt-danger-fg-trigger))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--disabled{cursor:not-allowed;--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-disable-fg));--ptc-menuitem-description: rgba(var(--pt-disable-fg))}.pc_menu_item.pc_menu_item--static-style{--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item>.pc_menu_item__content{display:flex;flex-direction:column;flex:1 1 0%;gap:var(--pt-dimension-200, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_menu_item>.pc_menu_item__content>.pc_menu_item__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ptc-menuitem-description)}.pc_menu_item>.pc_menu_item__content>.pc_menu_item__title{color:var(--ptc-menuitem-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_menu_item.pc_menu_item--hover-trailing .pc_menu_item__trailing{display:none}.pc_menu_item.pc_menu_item--hover-trailing:hover .pc_menu_item__trailing{display:flex}.pc_menu_item:not(.pc_menu_item--disabled):not(.pc_menu_item--static-style){cursor:pointer}.pc_menu_item.pc_menu_item--sm{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-sm, 4px);padding:var(--pt-dimension-200, 4px)}.pc_menu_item.pc_menu_item--sm:not(.pc_menu_item--description){height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px)}.pc_menu_item.pc_menu_item--sm.pc_menu_item--description{height:42px;min-height:42px;max-height:42px}.pc_menu_item.pc_menu_item--sm>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item.pc_menu_item--md{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-md, 6px);padding:var(--pt-dimension-300, 6px)}.pc_menu_item.pc_menu_item--md:not(.pc_menu_item--description){height:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px);max-height:var(--pt-dimension-1600, 32px)}.pc_menu_item.pc_menu_item--md.pc_menu_item--description{height:50px;min-height:50px;max-height:50px}.pc_menu_item.pc_menu_item--md>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_menu_item.pc_menu_item--md>.pc_menu_item__content>.pc_menu_item__description{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item.pc_menu_item--lg{gap:var(--pt-dimension-300, 6px);border-radius:var(--pt-roundness-lg, 8px);padding:var(--pt-dimension-400, 8px)}.pc_menu_item.pc_menu_item--lg:not(.pc_menu_item--description){height:var(--pt-dimension-2000, 40px);min-height:var(--pt-dimension-2000, 40px);max-height:var(--pt-dimension-2000, 40px)}.pc_menu_item.pc_menu_item--lg.pc_menu_item--description{height:54px;min-height:54px;max-height:54px}.pc_menu_item.pc_menu_item--lg>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_menu_item.pc_menu_item--lg>.pc_menu_item__content .pc_menu_item__description{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item>.pc_menu_item__leading{height:100%;display:flex;gap:var(--pt-dimension-200, 4px);color:var(--ptc-menuitem-fg)}.pc_menu_item>.pc_menu_item__branch{--ptu-text-opacity:1;color:rgba(var(--pt-gray-9),var(--ptu-text-opacity))}.pc_menu_item>.pc_menu_item__trailing{color:var(--ptc-menuitem-fg);display:flex;align-items:center;gap:var(--pt-dimension-200, 4px)}.pc_menu_item.pc_menu_item--leading-center>.pc_menu_item__leading{align-items:center}.pc_menu_item:not(.pc_menu_item--leading-center)>.pc_menu_item__leading{align-items:flex-start}.pc_menu_item:not(.pc_menu_item--un-focusable):not(.pc_menu_item--disabled):focus{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_sub_menu{width:100%}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger.pc_menu_item--selected:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu__items{display:flex;flex-direction:column;gap:var(--pt-dimension-200, 4px)}.pc_sub_menu__items .pc_sub_menu,.pc_menu .pc_sub_menu{width:100%}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active) .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):hover .pc_menu_item,.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled)[data-highlighted] .pc_menu_item,.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled)[data-hover] .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):active .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active) .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):hover .pc_menu_item,.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled)[data-highlighted] .pc_menu_item,.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled)[data-hover] .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):active .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_tree__node.pc_tree__node--disabled .pc_menu_item{cursor:not-allowed;--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-disable-fg));--ptc-menuitem-description: rgba(var(--pt-disable-fg))}\n";
|
|
3
3
|
const menuItemId = `${prefix}s-menu_item`;
|
|
4
4
|
const addMenuItemCss = () => addCssToHead(menuItemId, cssText);
|
|
5
5
|
const removeMenuItemCss = () => removeCssFromHead(menuItemId);
|
package/dist/menu_item.umd.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
|
|
4
|
-
const cssText = ".pc_menu_item{box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;outline:0;display:flex;align-items:center;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all;background:var(--ptc-menuitem-bg)}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):not(:hover):not([data-highlighted]):not([data-hover]):not(:active){--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):hover,.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected)[data-highlighted],.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected)[data-hover]{--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):active:not(:has(.pc_sub_menu__items .pc_menu_item:active)){--ptc-menuitem-bg: rgba(var(--pt-bg-trigger));--ptc-menuitem-fg: rgba(var(--pt-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected).pc_sub_menu__trigger:active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle));--ptc-menuitem-fg: rgba(var(--pt-primary-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):hover,.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled)[data-highlighted],.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled)[data-hover]{--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):active:not(:has(.pc_menu_item:active)){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-trigger));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled){--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):not(:hover):not(:active){--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-danger-fg))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):hover{--ptc-menuitem-bg: rgba(var(--pt-danger-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-danger-fg-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):active{--ptc-menuitem-bg: rgba(var(--pt-danger-fill-subtle-trigger));--ptc-menuitem-fg: rgba(var(--pt-danger-fg-trigger))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--disabled{cursor:not-allowed;--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-disable-fg));--ptc-menuitem-description: rgba(var(--pt-disable-fg))}.pc_menu_item.pc_menu_item--static-style{--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item>.pc_menu_item__content{display:flex;flex-direction:column;flex:1 1 0%;gap:var(--pt-dimension-200, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_menu_item>.pc_menu_item__content>.pc_menu_item__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ptc-menuitem-description)}.pc_menu_item>.pc_menu_item__content>.pc_menu_item__title{color:var(--ptc-menuitem-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_menu_item.pc_menu_item--hover-trailing .pc_menu_item__trailing{display:none}.pc_menu_item.pc_menu_item--hover-trailing:hover .pc_menu_item__trailing{display:flex}.pc_menu_item:not(.pc_menu_item--disabled):not(.pc_menu_item--static-style){cursor:pointer}.pc_menu_item.pc_menu_item--sm{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-sm, 4px);padding:var(--pt-dimension-200, 4px)}.pc_menu_item.pc_menu_item--sm:not(.pc_menu_item--description){height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px)}.pc_menu_item.pc_menu_item--sm.pc_menu_item--description{height:42px;min-height:42px;max-height:42px}.pc_menu_item.pc_menu_item--sm>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item.pc_menu_item--md{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-md, 6px);padding:var(--pt-dimension-300, 6px)}.pc_menu_item.pc_menu_item--md:not(.pc_menu_item--description){height:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px);max-height:var(--pt-dimension-1600, 32px)}.pc_menu_item.pc_menu_item--md.pc_menu_item--description{height:50px;min-height:50px;max-height:50px}.pc_menu_item.pc_menu_item--md>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_menu_item.pc_menu_item--md>.pc_menu_item__content>.pc_menu_item__description{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item.pc_menu_item--lg{gap:var(--pt-dimension-300, 6px);border-radius:var(--pt-roundness-lg, 8px);padding:var(--pt-dimension-400, 8px)}.pc_menu_item.pc_menu_item--lg:not(.pc_menu_item--description){height:var(--pt-dimension-2000, 40px);min-height:var(--pt-dimension-2000, 40px);max-height:var(--pt-dimension-2000, 40px)}.pc_menu_item.pc_menu_item--lg.pc_menu_item--description{height:54px;min-height:54px;max-height:54px}.pc_menu_item.pc_menu_item--lg>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_menu_item.pc_menu_item--lg>.pc_menu_item__content .pc_menu_item__description{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item>.pc_menu_item__leading{color:var(--ptc-menuitem-fg);height:100%;display:flex}.pc_menu_item>.pc_menu_item__leading>.pc_menu_item__leading_content{display:flex;align-items:center;gap:var(--pt-dimension-200, 4px)}.pc_menu_item>.pc_menu_item__branch{--ptu-text-opacity:1;color:rgba(var(--pt-gray-9),var(--ptu-text-opacity))}.pc_menu_item>.pc_menu_item__trailing{color:var(--ptc-menuitem-fg);display:flex;align-items:center;gap:var(--pt-dimension-200, 4px)}.pc_menu_item.pc_menu_item--leading-center>.pc_menu_item__leading{align-items:center}.pc_menu_item.pc_menu_item--leading-center>.pc_menu_item__leading>.pc_menu_item__leading_content{height:100%}.pc_menu_item:not(.pc_menu_item--un-focusable):not(.pc_menu_item--disabled):focus{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_sub_menu{width:100%}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger.pc_menu_item--selected:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu__items{display:flex;flex-direction:column;gap:var(--pt-dimension-200, 4px)}.pc_sub_menu__items .pc_sub_menu,.pc_menu .pc_sub_menu{width:100%}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active) .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):hover .pc_menu_item,.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled)[data-highlighted] .pc_menu_item,.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled)[data-hover] .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):active .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active) .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):hover .pc_menu_item,.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled)[data-highlighted] .pc_menu_item,.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled)[data-hover] .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):active .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_tree__node.pc_tree__node--disabled .pc_menu_item{cursor:not-allowed;--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-disable-fg));--ptc-menuitem-description: rgba(var(--pt-disable-fg))}\n";
|
|
4
|
+
const cssText = ".pc_menu_item{box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;outline:0;display:flex;align-items:center;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all;background:var(--ptc-menuitem-bg)}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):not(:hover):not([data-highlighted]):not([data-hover]):not(:active){--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):hover,.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected)[data-highlighted],.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected)[data-hover]{--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):active:not(:has(.pc_sub_menu__items .pc_menu_item:active)){--ptc-menuitem-bg: rgba(var(--pt-bg-trigger));--ptc-menuitem-fg: rgba(var(--pt-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_menu_item:not(.pc_menu_item--static-style):not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected).pc_sub_menu__trigger:active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle));--ptc-menuitem-fg: rgba(var(--pt-primary-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):hover,.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled)[data-highlighted],.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled)[data-hover]{--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--selected:not(.pc_menu_item--danger):not(.pc_menu_item--disabled):active:not(:has(.pc_menu_item:active)){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-trigger));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled){--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):not(:hover):not(:active){--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-danger-fg))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):hover{--ptc-menuitem-bg: rgba(var(--pt-danger-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-danger-fg-target))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--danger:not(.pc_menu_item--disabled):active{--ptc-menuitem-bg: rgba(var(--pt-danger-fill-subtle-trigger));--ptc-menuitem-fg: rgba(var(--pt-danger-fg-trigger))}.pc_menu_item:not(.pc_menu_item--static-style).pc_menu_item--disabled{cursor:not-allowed;--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-disable-fg));--ptc-menuitem-description: rgba(var(--pt-disable-fg))}.pc_menu_item.pc_menu_item--static-style{--ptc-menuitem-bg: var(--pt-alpha-gray-0);--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_menu_item>.pc_menu_item__content{display:flex;flex-direction:column;flex:1 1 0%;gap:var(--pt-dimension-200, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_menu_item>.pc_menu_item__content>.pc_menu_item__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ptc-menuitem-description)}.pc_menu_item>.pc_menu_item__content>.pc_menu_item__title{color:var(--ptc-menuitem-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_menu_item.pc_menu_item--hover-trailing .pc_menu_item__trailing{display:none}.pc_menu_item.pc_menu_item--hover-trailing:hover .pc_menu_item__trailing{display:flex}.pc_menu_item:not(.pc_menu_item--disabled):not(.pc_menu_item--static-style){cursor:pointer}.pc_menu_item.pc_menu_item--sm{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-sm, 4px);padding:var(--pt-dimension-200, 4px)}.pc_menu_item.pc_menu_item--sm:not(.pc_menu_item--description){height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px)}.pc_menu_item.pc_menu_item--sm.pc_menu_item--description{height:42px;min-height:42px;max-height:42px}.pc_menu_item.pc_menu_item--sm>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item.pc_menu_item--md{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-md, 6px);padding:var(--pt-dimension-300, 6px)}.pc_menu_item.pc_menu_item--md:not(.pc_menu_item--description){height:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px);max-height:var(--pt-dimension-1600, 32px)}.pc_menu_item.pc_menu_item--md.pc_menu_item--description{height:50px;min-height:50px;max-height:50px}.pc_menu_item.pc_menu_item--md>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_menu_item.pc_menu_item--md>.pc_menu_item__content>.pc_menu_item__description{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item.pc_menu_item--lg{gap:var(--pt-dimension-300, 6px);border-radius:var(--pt-roundness-lg, 8px);padding:var(--pt-dimension-400, 8px)}.pc_menu_item.pc_menu_item--lg:not(.pc_menu_item--description){height:var(--pt-dimension-2000, 40px);min-height:var(--pt-dimension-2000, 40px);max-height:var(--pt-dimension-2000, 40px)}.pc_menu_item.pc_menu_item--lg.pc_menu_item--description{height:54px;min-height:54px;max-height:54px}.pc_menu_item.pc_menu_item--lg>.pc_menu_item__content{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_menu_item.pc_menu_item--lg>.pc_menu_item__content .pc_menu_item__description{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_menu_item>.pc_menu_item__leading{height:100%;display:flex;gap:var(--pt-dimension-200, 4px);color:var(--ptc-menuitem-fg)}.pc_menu_item>.pc_menu_item__branch{--ptu-text-opacity:1;color:rgba(var(--pt-gray-9),var(--ptu-text-opacity))}.pc_menu_item>.pc_menu_item__trailing{color:var(--ptc-menuitem-fg);display:flex;align-items:center;gap:var(--pt-dimension-200, 4px)}.pc_menu_item.pc_menu_item--leading-center>.pc_menu_item__leading{align-items:center}.pc_menu_item:not(.pc_menu_item--leading-center)>.pc_menu_item__leading{align-items:flex-start}.pc_menu_item:not(.pc_menu_item--un-focusable):not(.pc_menu_item--disabled):focus{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_sub_menu{width:100%}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):not(.pc_menu_item--selected):active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-bg-target));--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu[data-state=open]>.pc_sub_menu__trigger.pc_menu_item--selected:not(.pc_menu_item--disabled):not(.pc_menu_item--danger):active:has(.pc_sub_menu__items .pc_menu_item:active){--ptc-menuitem-bg: rgba(var(--pt-primary-fill-subtle-target));--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_sub_menu__items{display:flex;flex-direction:column;gap:var(--pt-dimension-200, 4px)}.pc_sub_menu__items .pc_sub_menu,.pc_menu .pc_sub_menu{width:100%}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active) .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):hover .pc_menu_item,.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled)[data-highlighted] .pc_menu_item,.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled)[data-hover] .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_tree__node:not(.pc_tree__node--active):not(.pc_tree__node--disabled):active .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):not(:hover):not([data-highlighted]):not([data-hover]):not(:active) .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg));--ptc-menuitem-description: rgba(var(--pt-fg-subtle))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):hover .pc_menu_item,.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled)[data-highlighted] .pc_menu_item,.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled)[data-hover] .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg-target));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-target))}.pc_tree__node.pc_tree__node--active:not(.pc_tree__node--disabled):active .pc_menu_item{--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-primary-fg-trigger));--ptc-menuitem-description: rgba(var(--pt-fg-subtle-trigger))}.pc_tree__node.pc_tree__node--disabled .pc_menu_item{cursor:not-allowed;--ptc-menuitem-bg: transparent;--ptc-menuitem-fg: rgba(var(--pt-disable-fg));--ptc-menuitem-description: rgba(var(--pt-disable-fg))}\n";
|
|
5
5
|
const menuItemId = `${prefix}s-menu_item`;
|
|
6
6
|
const addMenuItemCss = () => addCssToHead(menuItemId, cssText);
|
|
7
7
|
const removeMenuItemCss = () => removeCssFromHead(menuItemId);
|